如何基于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 相关文章推荐
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
vue+element实现打印页面功能
May 20 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 Javascript
JS操作JSON常用方法(10w阅读)
Dec 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
str_replace只替换一次字符串的方法
2013/04/09 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
JavaScript 乱码问题
2009/08/06 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
Python修改MP3文件的方法
2015/06/15 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
费用会计岗位职责
2014/01/01 职场文书
电子银行营销方案
2014/02/22 职场文书
师德师风自查材料
2014/10/14 职场文书
个人年终总结范文
2015/03/09 职场文书
工程质检员岗位职责
2015/04/08 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫