web移动端常用解决方案:
一、通过js+rem,这里有一个解决方案(http://imochen.github.io/hotcss/)
1.1、rem兼容性(https://caniuse.com)
ios:6.1系统以上
android:2.1系统以上
1.2、什么是rem的
rem其实就是根据网页的根元素来设置字体大小,和em(font size of the element)的区别是,em是根据其父元素的字体大小来设置。现在大部分浏览器默认font-size:16px。如果一个p标签想要设置font-size为12px,用rem作单位则变成了font-size:0.75rem(12/16=0.75)。根据这个原理,将rem运用到布局,则可以实现不同分辨率的适配。
1.3、rem基准值计算
实际开发中,我们不可能将默认font-size大小作为基准值,这个基准值应该是是根据ui设计稿获取的。如果ui以iphone6(375px)的分辨率为设计基准,设计图的分辨率就为750px(dpr为2),那么我们可以以375/10=37.5为基准(也可以不除已10,这里只是为了不让font-size值太大)。
1.4、动态计算font-size的值
方法一、利用css媒体查询
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2) {
二、淘宝flexible方案(https://github.com/amfe/article/issues/17)。