前言

作为一个小前端,经常要和H5打交道,这就面临着不同终端的适配问题。
Flexible方案通过Hack手段来根据设备的dpr值相应改变<meta>标签中viewport的值,给我更贴切的体会就是通过js脚本根据设备的dpr和设计图的宽度来计算出htmlfont-size值,然后就运用rem单位开发可以等比例缩放的H5页面。
但是!Flexible已经完成了他自身的历史使命,我们可以放下Flexible,拥抱新的变化

做到适配要解决的问题

在移动端布局,我们需要面对两个最为重要的问题:

  • 各终端下的适配问题
  • Retina屏的细节处理
    不同的终端,我们面对的屏幕分辨率、DPR、1px2x图等一系列的问题。那么这个布局方案也是针对性的解决这些问题,只不过解决这些问题不再是使用Hack手段来处理,而是直接使用原生的CSS技术来处理的。

适配终端

以前的Flexible方案是通过JavaScript来模拟vw的特性,那么到今天为止,vw已经得到了众多浏览器的支持,也就是说,可以直接考虑将vw单位运用于我们的适配布局中。

vw是基于Viewport视窗的长度单位,这里的视窗(Viewport)指的就是浏览器可视化的区域,而这个可视区域是window.innerWidth/window.innerHeight的大小。用下图简单的来示意一下:

蓝色区域就是 window.innerWidth 和 window.innerHeight

CSS Values and Units Module Level 3中和Viewport相关的单位有四个,分别为vwvhvminvmax


  • vw:是Viewport's width的简写,1vw等于window.innerWidth1%
  • vh:和vw类似,是Viewport's height的简写,1vh等于window.innerHeihgt1%
  • vminvmin的值是当前vwvh中较小的值
  • vmaxvmax的值是当前vwvh中较大的值

如果设计稿用750px宽度的,100vw = 750px,即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。如果不想自己计算,我们可以使用PostCSS的插件postcss-px-to-viewport,让我们可以直接在代码中写px

具体的PostCSS我们放到另外一篇文章吧,毕竟我还不会~

参考资料

大漠--再聊移动端页面的适配

使用viewport中的vm来适配移动端页面的更多相关文章

  1. 让 jQuery UI draggable 适配移动端

    背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...

  2. Eclipse开发过程中个VM Arguments的设置

    Eclipse开发过程中个VM Arguments的设置 1:jre中的Default VM Arguments: -Xms256M -Xmx640M -XX:PermSize=256m -XX:Ma ...

  3. 对连接到 Azure 中 Linux VM 时出现的问题进行详细的 SSH 故障排除的步骤

    有许多可能的原因会导致 SSH 客户端无法访问 VM 上的 SSH 服务. 如果已经执行了较常规的 SSH 故障排除步骤,则需要进一步排查连接问题. 本文指导用户完成详细的故障排除步骤,以确定 SSH ...

  4. 微信小程序中的iPhone X适配问题

    微信小程序中的iPhone X适配问题 小程序中下方的导航会被iPhone X下面的那条黑线盖住[微笑脸],所以要专门为了iPhone X做样式上的适配[微笑脸] wx.getSystemInfo({ ...

  5. android 中webview的屏幕适配问题

    两行代码解决WebView的屏幕适配问题 一个简单的方法,让网页快速适应手机屏幕,代码如下 1 2 WebSettings webSettings= webView.getSettings(); we ...

  6. MVVM中的vm双向监听和mvc的缺点

    `MVVM`模型: - 即Model,模型,包括数据和一些基本操作 - 即View,视图,页面渲染结果- 即View-Model,模型与视图间的双向操作(无需开发人员干涉) `MVVM`中的`VM`要 ...

  7. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  8. Vue将px转化为rem适配移动端

    Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...

  9. 使用vw做移动端页面的适配

    Flexible到今天也有几年的历史了,解救了很多同学针对于H5页面布局的适配问题.而这套方案也相对而言是一个较为成熟的方案.简单的回忆一下,当初为了能让页面更好的适配各种不同的终端,通过Hack手段 ...

随机推荐

  1. mySql的UDF是什么

    CRUD:添删改查 UDF是mysql的一个拓展接口,UDF(Userdefined function)可翻译为用户自定义函数,这个是用来拓展Mysql的技术手段. 1 MySQL简介 MySQL是最 ...

  2. 实现DataGridView控件中CheckBox列的使用

    最近做WindowsForms程序,使用DataGridView控件时,加了一列做选择用,发现CheckBox不能选中.搜索后,要实现DataGridView的CellContentClick事件,将 ...

  3. ServiceNow在中国还有没有模仿者?

    美国版的“ServiceNow”:https://www.servicenow.com 中国版的“ServiceHot” :http://www.itsmcn.com

  4. shell编程第一天

    shell编程基础 脚本:简单来说就是一条条的文字命令(一些指令的堆积)Shell属于内置的脚本 1.程序开发效率非常高,依赖于功能强大的命令可以迅速地完成开发任务(批处理) 2.语法简单,代码写起来 ...

  5. vue中的页面渲染方案

    一.模板渲染 <div id="J_render_app"> <ul v-if="items.length"> <li v-for ...

  6. bzoj1051: [HAOI2006]受欢迎的牛(tarjan板子)

    1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 6064  Solved: 3179[Submit][Sta ...

  7. jemter模拟高并发访问(亲测ok)

    https://blog.csdn.net/a574258039/article/details/19549407

  8. Python二进制转十进制算法、十进转二进制算法

    二进制数转换成十进制数:二进制数从右向左每位数乘以2的次方(从0开始,从右向左依次+1),然后相加求和即可 如:0101转成十进制为:1*20+0*21+1*22+0*23 =1+0+4+0=5 算法 ...

  9. .net 后台获取CheckBoxList的值

    版权声明:本文档可以随意转载,我愿意和大家共同分享,共同进步. http://blog.csdn.net/u014479921/article/details/73649799 1.前台的多选控件 & ...

  10. 11-20 bom 浏览器对象模型

    1.window.open(url,ways) url 是打开的网页地址 ways 打开的方式 _self 2.window.close() 3.浏览器用户信息:Window.navigator 4. ...