如何基于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创建类/对象的几种方式概述及实例
May 06 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
AngularJS动态菜单操作指令
Apr 25 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 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生成随机密码方法汇总
2015/08/27 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
Laravel 队列使用的实现
2019/01/08 PHP
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
在Python中使用正则表达式的方法
2015/08/13 Python
python实现ID3决策树算法
2018/08/29 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
农村改厕实施方案
2014/03/22 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
2014年科普工作总结
2014/12/06 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
检讨书大全
2015/01/27 职场文书
社区元宵节活动总结
2015/02/06 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书