web app响应式字体设置！rem之我见

之前做沙漠教育的时候，直接以设计图为准，然后强暴式，缩放处理。简单。直接，粗暴！但是，开发快。……一劳永逸！

但那是，现在开发，作为业界良心：是不能那么做的！（那个是被逼的啊

为什么不使用 viewport 等比缩放？

viewport的做法：

<meta name=" viewport " content=" width=320, maximum-scale=1.3, user-scalable=no ">

这种做法是将屏幕等比缩放，缩放过大时会失真，第二个，一些手势事件有莫名其妙的问题。

为什么不设置html font-size？

首先看代码：

@media screen and (max-width:362px)and(min-width: 330px){

    html{font-size: 60%;}
    //.top-banner{
    //    font-size: 15px
    //}
    //.btn-download{
    //    margin-left: 5%;
    //}
}

@media screen and (max-width:330px){
    html{font-size: 53.333331%;}
    //.top-banner{
    //    font-size: 14px
    //}
    //.btn-download{
    //    margin-left: 4%;
    //}
}

因为我的设计图是750，iphone6设计的！

至于是怎么得出来的数字呢？

我们走到。浏览器默认字体是16像素。1/16=62.5

360/375*62.5%=60%

就黑之前，做响应式图片、padding-top，是一个道理哈！！

REM响应式布局

放弃px单位，使用rem作为单位，这样在不同尺寸的设备上，通过修改根节点的font-size大小，实现等比例缩放

html{
    font-size:10px;
}
#div1{
    width:20rem;
    float:left;
}
#div2{
    width:40rem;
    float:left;
}

现在换到宽度为400px的设备上，保持比例相同，只有改变font-size即可

为什么不用百分比呢？岂不是很简单

百分比是相对于父元素计算的，使用不方便，而且rem多了个字体变化。

自动转换成rem

//改变font-size
(function(doc=document,win=windows,widht=720){
    var docEI = doc.documentElement,
    resizeEvt = 'orientationchange' in window?'orientataionchange':'resize',
    recalc = function(){
        var clientWidth = docEI.clientWidth;
        if(!clientWidth) return;
        //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
        docEI.style.fontSize = 100*(clientWidth/1536)+'px';
    }

    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document,window);

使用时，把默认width 改为设计稿的尺寸即可。

rem只是等比缩放，只解决了响应式布局的准则 的部分问题 ，还需要配合媒体查询

转载本站文章《web app响应式字体设置！rem之我见》,
请注明出处：https://www.zhoulujun.cn/html/webfront/style/css3/2016_0305_7677.html