如何基于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 相关文章推荐
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
vue-router 权限控制的示例代码
Sep 21 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
JS实现简易计算器
Feb 14 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
PHP中动态显示签名和ip原理
2007/03/28 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
python 文本单词提取和词频统计的实例
2018/12/22 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
美国女孩服装购物网站:Justice
2017/03/04 全球购物
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
《学会待客》教学反思
2014/02/22 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
公司授权委托书范文
2014/09/21 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript