前端的自适应

方法一：适合pc端用rem单位

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">

<style>
    html,body{
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }
    #app{
        width: 25.6rem;
        height: 100%;
        overflow: auto;
        margin: 0 auto;
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded",function(){
        _flexable();
    });

    window.onresize = function(){
        _flexable();
    }
    function _flexable(){
        var width = document.documentElement.clientWidth;
        document.getElementsByTagName("html")[0].style.fontSize=(width/2560)*100+"px";
    }
    //if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')图片路径 
</script>
方法二：配置rem单位

// px2Rem  把px ==>rem  150px  1rem = 75px  2rem
@function p($px,$base:75){
    @return ($px/$base) * 1rem;
}
或

height: calc(88rem / 75);

转载于:https://www.cnblogs.com/flavorhome/p/9412838.html