如何基于viewport vm适配移动端页面


Posted in Javascript onNovember 13, 2020

前言

作为一个小前端,经常要和H5打交道,这就面临着不同终端的适配问题。

Flexible方案通过Hack手段来根据设备的dpr值相应改变<meta>标签中viewport的值,给我更贴切的体会就是通过js脚本根据设备的dpr和设计图的宽度来计算出html的font-size值,然后就运用rem单位开发可以等比例缩放的H5页面。

但是!Flexible已经完成了他自身的历史使命,我们可以放下Flexible,拥抱新的变化。

做到适配要解决的问题

  • 在移动端布局,我们需要面对两个最为重要的问题:
  • 各终端下的适配问题
  • Retina屏的细节处理

不同的终端,我们面对的屏幕分辨率、DPR、1px、2x图等一系列的问题。那么这个布局方案也是针对性的解决这些问题,只不过解决这些问题不再是使用Hack手段来处理,而是直接使用原生的CSS技术来处理的。

适配终端

以前的Flexible方案是通过JavaScript来模拟vw的特性,那么到今天为止,vw已经得到了众多浏览器的支持,也就是说,可以直接考虑将vw单位运用于我们的适配布局中。

vw是基于Viewport视窗的长度单位,这里的视窗(Viewport)指的就是浏览器可视化的区域,而这个可视区域是window.innerWidth/window.innerHeight的大小。用下图简单的来示意一下:

如何基于viewport vm适配移动端页面

蓝色区域就是 window.innerWidth 和 window.innerHeight

在CSS Values and Units Module Level 3中和Viewport相关的单位有四个,分别为vw、vh、vmin和vmax。

  • vw:是Viewport's width的简写,1vw等于window.innerWidth的1%
  • vh:和vw类似,是Viewport's height的简写,1vh等于window.innerHeihgt的1%
  • vmin:vmin的值是当前vw和vh中较小的值
  • vmax:vmax的值是当前vw和vh中较大的值

如果设计稿用750px宽度的,100vw = 750px,即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。如果不想自己计算,我们可以使用PostCSS的插件postcss-px-to-viewport,让我们可以直接在代码中写px。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
p5.js临摹旋转爱心
Oct 23 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 #Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 #Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 #Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 #Javascript
vue print.js打印支持Echarts图表操作
Nov 13 #Javascript
vue 中使用print.js导出pdf操作
Nov 13 #Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 #Javascript
You might like
打造计数器DIY三步曲(中)
2006/10/09 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
PHP session 会话处理函数
2016/06/06 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
js图片自动切换效果处理代码
2013/05/07 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
使用python绘制人人网好友关系图示例
2014/04/01 Python
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
python3 pygame实现接小球游戏
2019/05/14 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
如何在django中运行scrapy框架
2020/04/22 Python
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
劳动模范获奖感言
2015/07/31 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis