移动端自适应解决方案

Posted 爱吃鱼摆摆

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端自适应解决方案相关的知识,希望对你有一定的参考价值。

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{

      html {
    font-size: 37.5px;
  }
}
方法二、js计算
document.getElementsByTagName(\'html\')[0].style.fontSize = window.innerWidth / 10 + \'px\';
 
1.5、rem适配进阶
当ui使用ipone6(375px)作为设计基准,完成的设计图分辨率双倍的原因是iphone6属于高清屏,设备像素比(device pixel ratio)dpr为2。
通过js的window.devicePixelRatio(这个方法在安卓上可能不准确)获取到当前设备的dpr,拿到了dpr之后就可以在viewport meta头里,取消让浏览器自动缩放页面,而自己去设置viewport的content
meta.setAttribute(\'content\', \'initial-scale=\' + 1/dpr + \', maximum-scale=\' + 1/dpr + \', minimum-scale=\' + 1/dpr + \', user-scalable=no\');
 
这样一来在开发时就可以设置font-size为设计图大小,这里iphone6设计图font-size就为75px,而且还解决了图片高清问题和1像素边框的问题
 

       

二、淘宝flexible方案(https://github.com/amfe/article/issues/17)。

 


以上是关于移动端自适应解决方案的主要内容,如果未能解决你的问题,请参考以下文章

移动端自适应方案

移动端自适应解决方案

移动端自适应布局方案尝试

(转)移动端自适应方案

移动端自适应解决方案

基于rem的移动端自适应解决方案