屏幕适配Flexible.js

flexible + cssrem\px2rem插件+ flex布局实现屏幕自适应布局

1、下载flexible插件

https://wws.lanzoui.com/iMpclv6bmni

2、引入到项目中

<script src="js/flexible.js"></script>
<link rel="stylesheet" href="css/flexible.css">

3、利用flexible将屏幕分为多分 数值越小越清晰

flexible.js

function c() {
        var b = f.getBoundingClientRect().width;
        // b / i > 540 && (b = 540 * i);
        // todo 1、注释掉手机屏自适应
        // 将屏幕分为24份 1920分成24份
        var c = b / 24;
        f.style.fontSize = c + "px", k.rem = a.rem = c
    }

4、下载cssrem\px2rem插件，并设置参考px

在编辑器中下载插件

setting->PX to Rem -> root fontsize -> 80  // 1920 / 24 = 80

5、设置屏幕最小值和最大值

@media screen and (max-width:1024px){
    html{
        font-size: 42.66px !important;
    }
}
@media screen and (min-width:1920px){
    html{
        font-size: 80px !important;
    }
}