自适应方案 rem 和 vh

REM （flexible） 

rem (font size of the root element) 是指相对于根元素的字体大小的单位。  相对单位

em (font size of the element) 相对父元素的字体大小的单位  

根据屏幕宽度设置HTML 标签的 font-size ,再在布局时使用rem 单位来布局，达到自适应的目的。  lib-flexible ： 1rem 设置为屏幕的 1/10 

vm

vm 是视口宽度的 1/100, 用vw 来自适应再合适不过了。 

例如： 如果你的设计图是750px 的宽度， 对于75px 的元素就可以设置为10 vw .这样在宽度为375px 的手机上的表现就是37.5px

postcss-px-to-viewport 自动帮你转换为vw 

 

通过插件自动转换为rem或vw会造成以下问题:

1，缩放到低于1px的元素会时隐时现

2，两个同样宽度的元素因为各自周围的元素宽度不同，导致两元素相差1px

3,宽高相同的正方形，长宽不相等了

4，border-radius ：50% 画的圆不圆了

可以通过js 根据设备宽度，计算出该元素在该设备下的实际的px,取整后动态地设置到元素的style上

 

cursor：pointer 元素点击背景变色的问题

对于添加了 cursor：pointer 属性的元素，在移动端点击时，背景会高亮

为元素添加 -webkit-tap-hightlight-color: transparent 属性可以隐藏背景高亮

 

Android浏览器下line-height 垂直居中偏离的问题

由于Android中文字排版的问题，通过设置字体，确实可以解决一部分偏离问题，但仍然会有一些略微偏离的情况，据说与行高奇偶数有关； 可以设置上下padding 的方向进行垂直居中，再根据具体情况进行微调。