移动端font-size适配方案

概述

这是我研究移动端页面时的思考，记录下来供之后开发时参考，相信对其余人也有用。因为我写移动端页面写的还比较少，一些问题都还没遇到，因此个人这篇博文难免有些错误的地方，还请大佬多多指正。

这篇文章是基于网易的移动端屏幕适配方案而来的。

思考

在移动端开发中，对于页面屏幕适配要解决哪些问题？

1. 对于不一样的dpr，图片会有模糊的状况，怎么适配？
2. 对于不一样的屏幕宽度，怎么适配？
3. 对于不一样的内容：容器，文字和图片，怎么适配？

对于移动适配，我我的但愿达到的效果是，对于不一样的屏幕，在视觉上为了方便阅读，页面只须要简单地放大或缩小便可。可是因为流式布局(根据父容器的百分比来决定宽高)具备很大的局限性，因此咱们采用rem布局。

dpr

dpr是什么？简单来讲，dpr是实际像素与看到的像素的比值。好比说你看到的是1px，那么在dpr为2的设备上，它其实是由2个像素点组成的，每一个像素点的实际大小是0.5px。

dpr会形成什么问题？好比一个200px*300px的图片，在dpr为1的设备上，显示正常，可是在dpr为2的设备上，因为实际像素变成了400px*600px(虽然实际大小仍然只有200px*300px)，那些多余的像素是设备推测出来的，因此会有图片变模糊的问题。

怎么解决？网上的解决方法说的很复杂，真的听不懂。。。可是简单来讲，解决方案是使用400px*600px的图片，可是规定它的大小为200px*300px，因此在dpr为1的设备上，图片是被“压缩”过的，可是并不影响视觉效果；而在dpr为2的设备上，由于自己的图片大小是400px*600px，因此那些多余的px就从这里取了，不会经过设备推测，因此视觉效果会更好。

那么对于dpr>2的设备呢？实际上视觉效果影响不大，能够忽略。等到有足够的影响成为一个问题以后，再来解决。

屏幕宽度

机制是：对于不一样宽度的屏幕，咱们用js取到屏幕的宽度，而后根据这个宽度同比缩放font-size，因为咱们的css是用rem写的，因此页面内容也会同比缩放，达到咱们想要的效果。下面具体来说实施方案。

首先给html设置viewport：

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0, user-scalable=no, viewport-fit=cover">

而后，对于手机端，咱们但愿以iphone6做为参照，在其它屏幕上同比放大或缩小。

(1)以iphone6做为参照，iphone6的宽度是375px，dpr为2，因此对于上面显示的375px的图，咱们须要的图片大小是750px，因此咱们拿到的psd设计图的宽度必须是750px。为了方便书写rem，咱们但愿psd设计图上750px对应的rem是7.5rem。而设计图上面750px在iphone6上面的实际大小是375px，因此咱们须要设置iphone6的font-size=375/7.5px=50px。更通常地，因为移动端的font-size的默认值是16px，因此咱们更倾向于用一个百分比来设置font-size：font-size=50/16=312.5%。(注意：用px和百分比没有本质上的不一样。)

(2)在其它屏幕上进行缩放，为了解决这个问题，咱们用js来读取屏幕的宽度，而后利用这个宽度来进行缩放，代码以下：

var initScreen=function(){
    $("html").css("font-size", document.documentElement.clientWidth / 375 * 312.5 + "%");
}

最后，咱们须要解决横屏问题和用户手动缩放问题，他们本质上都是改变屏幕宽度的问题，因此咱们监听resize事件或者onorientationchange事件，当发生的时候，从新调用initScreen方法。代码以下：

$(window).on('onorientationchange' in window ? 'orientationchange' : 'resize', function () {
    setTimeout(initScreen, 200);
});

注意：上面的代码并非原生js，要引入zepto库！也能够用原生js实现，不过要考虑兼容性问题，我就不贴出代码了。

另外，为了增长代码的健壮性，在js加载不成功的时候也能进行适配，建议在css加上媒体查询：

html{ font-size: 312.5%; }
@media screen and (max-width:359px) and (orientation:portrait) {
    html { font-size: 266.67%; }
}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 300%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 320%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 333.33%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 345%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size:360%; }
}
@media screen and (min-width:480px)and (max-width:639px) and (orientation:portrait){
    html{ font-size:400%;}
}
@media screen and (min-width:640px) and (orientation:portrait){
    html{ font-size:533.33%;}
}

容器，文字和图片

我查了不少资料，对于其它适配方案，好比流式布局，栅格化布局等，都对容器，文字和图片的尺寸有不一样的写法。可是因为我这个方案只是缩放，并无额外的需求，因此对于容器，文字和图片的大小，都用rem就好了，暂时没有想出不能用rem的状况，等之后遇到问题再来记录。

注意：我这种适配方案中，1rem的实际大小是50px，而不是100px。因此0.12rem的字体，在设计稿上面是12px，可是在手机上的实际大小是6px！

其它

还有另一个很重要的度量单位，vh和vw，之前因为兼容性太差而不太适用，如今逐渐步入时代舞台，好比网易新闻的css里面就有下面这样一段代码。（目前vh和vw的适配方案还不成熟，等成熟了我再来记录。）

@media screen and (max-width: 320px) {
    html {
        font-size:42.667px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 321px) and (max-width:360px) {
    html {
        font-size:48px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 361px) and (max-width:375px) {
    html {
        font-size:50px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 376px) and (max-width:393px) {
    html {
        font-size:52.4px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 394px) and (max-width:412px) {
    html {
        font-size:54.93px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 413px) and (max-width:414px) {
    html {
        font-size:55.2px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 415px) and (max-width:480px) {
    html {
        font-size:64px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 481px) and (max-width:540px) {
    html {
        font-size:72px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 541px) and (max-width:640px) {
    html {
        font-size:85.33px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 641px) and (max-width:720px) {
    html {
        font-size:96px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 721px) and (max-width:768px) {
    html {
        font-size:102.4px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 769px) {
    html {
        font-size:102.4px;
        font-size: 13.33333vw
    }
}