如何利用vw+rem进行移动端布局

前言

由于在公司，只有一个前端，在作移动端布局的时候。利用px进行布局,发现，须要进行各类手机的适配。 因此在开发第二版的时候，想着引用lib-flexible库(即手淘的方案),询问了上一家公司的同事，会有一些字体和一些诡异的问题。 在无心中，忽然一个网友跟我说，他有一个很好用的适配方案。利用vw+rem。听着他分析了一把，感受还不错，因此大胆尝试了一把

根据CSS3规范,视口单位主要包括如下4个:

• vw : 1vw 等于视口宽度的1%
• vh : 1vh 等于视口高度的1%
• vmin : 选取 vw 和 vh 中最小的那个
• vmax : 选取 vw 和 vh 中最大的那个

用视口单位度量，视口宽度为100vw，高度为100vh（左侧为竖屏状况，右侧为横屏状况）

例如，在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，若是浏览器不支持0.5px，那么实际渲染结果多是7px）。

兼容性

利用适口单位适配页面

对于移动端开发来讲，最为重要的一点是如何适配页面，实现多终端的兼容，不一样的适配方式各有千秋，也各有缺点。

就主流的响应式布局、弹性布局来讲，经过Media Queries 实现的布局须要配置多个响应断点，并且带来的体验也对用户十分的不友好:布局在响应断点范围内的分辨率维持不表，而在响应断点切换的瞬间，布局带来断层式的切换变换，如同卡带的唱机般"咔咔咔"地一又一下。

而经过采用rem单位的动态计算的弹性布局,则是须要在头部内嵌一段脚原本进行监听分辨率的变化来动态改变根元素字体大小，使得CSS于JS耦合了在一块儿。

有没有办法可以解决这样的问题呢？

答案是确定,经过利用适口单位实现适配的页面,是既能解决响应式断层问题，又能解决脚本依赖的问题的。

用法以iPhone6为基准(750)

第一步通常来讲，我都会对移动端进行meta标签设置

<meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, minimum-scale=2.0, user-scalable=no">
复制代码

由于iPhone6以及大多数的dpr为2,为了第二步的方便进行换算

第二步设置body、html的font-size

html {
    font-size: 13.3333333333333vw // 设计图100px，浏览器根据缩放为 50px
}
复制代码

13.3333333333333vw怎么来?

100 / 750 = 0.133333333333333vw

咱们把这个适口当作100px,而后除于750换算得出 1px = 0.133333333333333vw

那么整个适口等于 0.133333333333333 * 100 = 13.3333333333333vw = 100px

最终于得出 100px = 1rem (设计图100px，浏览器根据缩放为 50px)

经过这样子换算咱们利用vw把rem转换成了根据设计以100px为基准

tip: (设计图100px，浏览器根据缩放为 50px)

那么在项目上就很好地能够进行使用了

div {

     // width: 设计图100px，实际浏览器根据缩放为 50px; 
     width: 1rem; 
}

span {
    height: .12rem
}

复制代码

已经用上该方案并上线的项目

该项目是本人开发的，技术略渣，多多包涵