移动端动态布局 设置字体大小

一、大漠大神的详细讲解，需要好好学习诶。关于 视窗 viewport、物理像素(physical pixel)、CSS像素、屏幕密度等概念性问题和解决办法。

设备像素比(device pixel ratio)

设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：

设备像素比 ＝ 物理像素 / 设备独立像素

使用Flexible实现手淘H5页面的终端适配

 二、用媒体查询来设置html的font-size：

通过iPhone6的 data-dpr='2' 和 iPhone6 Plus的 data-dpr='3' 来计算

@media screen and (min-width:375px){html, body{/* iPhone6的375px尺寸作为16px基准，414px正好18px大小,600 20px */font-size:calc(100% + 2 * (100vw - 375px) / 39);font-size:calc(16px + 2 * (100vw - 375px) / 39);}}
@media screen and (min-width:414px){html, body{/* 414px-1000px每100像素宽字体增加1px(18px-22px) */font-size:calc(112.5% + 4 * (100vw - 414px) / 586);font-size:calc(18px + 4 * (100vw - 414px) / 586);}}
@media screen and (min-width:600px){html, body{/* 600px-1000px每100像素宽字体增加1px(20px-24px) */font-size:calc(125% + 4 * (100vw - 600px) / 400);font-size:calc(20px + 4 * (100vw - 600px) / 400);}}
@media screen and (min-width:1000px){html, body{/* 1000px往后是每100像素0.5px增加 */font-size:calc(137.5% + 6 * (100vw - 1000px) / 1000);font-size:calc(22px + 6 * (100vw - 1000px) / 1000);}}

 

或者通过各屏幕尺寸不同，设置字体大小，这种方法局限性比较大

@media screen and (min-width: 320px) {
    html {font-size: 14px;}
}
 
@media screen and (min-width: 360px) {
    html {font-size: 16px;}
}
 
@media screen and (min-width: 400px) {
    html {font-size: 18px;}
}
 
@media screen and (min-width: 440px) {
    html {font-size: 20px;}
}
 
@media screen and (min-width: 480px) {
    html {font-size: 22px;}
}
 
@media screen and (min-width: 640px) {
    html {font-size: 28px;}
}

 

三、利用js来动态设置

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));