• home > webfront > style > css3 >

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

    Author:[email protected] Date:

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

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

    周陆军做的网站 沙漠教育

    但那是,现在开发,作为业界良心:是不能那么做的!(那个是被逼的啊

    为什么不使用 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