如何基于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 相关文章推荐
用javascript操作xml
Nov 04 Javascript
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
JS 分号引起的一段调试问题
Jun 18 Javascript
firefox下frameset取不到值的解决方法
Sep 06 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
手把手教你实现 Promise的使用方法
Sep 02 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
移动节点的jquery代码
2014/01/13 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
python模拟enum枚举类型的方法小结
2015/04/30 Python
Python实现控制台输入密码的方法
2015/05/29 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Python编程之序列操作实例详解
2017/07/22 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
python 串行执行和并行执行实例
2020/04/30 Python
python中doctest库实例用法
2020/12/31 Python
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
六查六看剖析材料
2014/02/15 职场文书
高中军训第一天感言
2014/03/06 职场文书
通信工程求职信
2014/07/16 职场文书
建议书范文
2015/02/05 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python