如何基于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停止输出代码
Jul 20 Javascript
Javascript writable特性介绍
Feb 27 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
Python自动调用IE打开某个网站的方法
2015/06/03 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
内业资料员岗位职责
2014/01/04 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
合伙协议书
2014/04/23 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
MySQL锁机制
2021/04/05 MySQL