移动web中如何使用sass配合使用rem

我们需要知道设计师给到的设计图，它是有个固定尺寸的，比如给到的图是750px，我们不能固定就按图中测量的大小写死，所以我们需要知道一个比例；

<script type="text/javascript"> 
window.onresize = setFontSize;
setFontSize();
function setFontSize(){
    var designWidth = 750;
    var windowWidth = document.documentElement.clientWidth;
    if(windowWidth > designWidth){
        windowWidth = designWidth;
    }
    document.documentElement.style.fontSize = 30 * (windowWidth / designWidth) + "px";

}
</script>

我们通过获取设备浏览器视口的宽度,我们设定最大不要超过30px;

$brower_default_font_size: 16px !default;
html{
    font-size: $brower_default_font_size;
}
@function pxTorem($px){
    @return $px / $brower_default_font_size * 1rem;
}

两者可以配合使用，sass默认为16px，如果不加上面的js，始终都是以16px为基准；

.header{
    background-color: blue;
    width:100%;
    height:pxTorem(80px);
    margin: 0 auto;
    box-sizing:border-box;
    .logo{
        position:absolute;
        left: 0;
        top:0;
        height:pxTorem(80px);
        width: pxTorem(68px);
        background-color:yellowgreen;
        line-height: pxTorem(80px);
        text-align: center;
        color:#fff;
    }
    .nav{
        box-sizing:border-box;
        padding:0 pxTorem(68px);
        height:pxTorem(80px);
        background-color:skyblue;
        color:#fff;
        input{
            box-sizing:border-box;
            outline: 0;
            height:pxTorem(80px);
            width: 100%;
            color:#333;
            line-height: 150%;
            text-indent: pxTorem(10px);
            font-size:  pxTorem(14px);
        }
    }
    .btn{
        position: absolute;
        right:0;
        top: 0;
        height:pxTorem(80px);
        width: pxTorem(68px);
        background-color:yellowgreen;
        line-height: pxTorem(80px);
        text-align: center;
        color:#fff;
    }

当然还有直接给html设定为62.5%的；

移动web中如何使用sass配合使用rem

推荐阅读更多精彩内容