rem等比例自适应手机尺寸

方法:用scss的函数动态计算rem值

$rem : 75px;基准值 设计图是750的宽 设为$rem变量设为75,设计图是350的宽 设为$rem变量设为35,
老的写法 需要用js来配合来动态改变font-size大小

?

1 2 3 4 5

//以iPhone6作为基准屏幕宽度 @function px2rem($px){     $rem : 75px;     @return ($px/$rem) + rem; }

使用方法 根据设计图量取尺寸大小,直接把数值放入sass函数中即可.

调用sass函数并传入数值,设计图中的元素是24px就把24px传入函数中

 

?

1 2 3 4 5

span {            display: block;            font-size: px2rem(24px);//调用sass函数并传入数值设计图中是24px就把24px传入函数中            color: #b3b3b3;        }

 最后要在HTML中加入以下代码

js:动态调整html的font-size

//动态调整html font-size大小
            (function() {
                resizeFont();

                function resizeFont() {
                    var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
                    var htmlDom = document.getElementsByTagName("html")[0];
                    htmlDom.style.fontSize = htmlWidth / 10 + "px";
                }
                window.onresize = function() {
                    resizeFont();
                }
            })()

 现在的写法 原理与老方法相同，就html这里font-size用vw单位来动态改变，不再通过js来改变（1vw等于设备的1/10） 比老版的写法要方便多了，但兼容性不如老版本安卓4.4才支持vw属性

@function px2rem($px){
    $rem: 75px;
    @return ($px / $rem) + rem;
}
html{
    font-size: 10vw;
    font-family: "微软雅黑";
}
.box{
    width: px2rem(130px);
    font-size:px2rem(30px) ;
}