rem等比例自適應手機尺寸

方法:用sass的函數動態計算rem值

$rem : 75px;基准值 設計圖是750的寬 設為$rem變量設為75,設計圖是350的寬 設為$rem變量設為35,
老的寫法 需要用js來配合來動態改變font-size大小

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

使用方法 根據設計圖量取尺寸大小,直接把數值放入sass函數中即可.

調用sass函數並傳入數值,設計圖中的元素是24px就把24px傳入函數中

 

 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) ;
}