解决移动端REM布局页面跳动的方案

最新推荐文章于 2020-03-20 18:48:43 发布

Razas

最新推荐文章于 2020-03-20 18:48:43 发布

阅读量568

点赞数

分类专栏： JavaScript 文章标签： rem

本文链接：https://blog.csdn.net/qq_25354709/article/details/84585834

版权

一、将REM.js 提到要加载的CSS之前

原来是这样的

HTML:

//-> 在页面最底部引入
<script src="../../js/user/user.js"></script>
</body>

JS:

//-> 动态设置REM
~function () {
    var desW = 640,  //设计稿宽度
        winW = document.documentElement.clientWidth || document.body.clientWidth;  //屏幕宽度
    //如果屏幕宽度大于设计稿的宽度
    if (winW > desW) {
        //$('.main').css('width', desW);
        //或者
        document.getElementById('main').style.width = desW + 'px';
        return;
    }
    //设置整个页面的HTML的font-size值
    document.documentElement.style.fontSize = winW / desW * 100 + 'px';
}();

现在，把这段代码，放入这个页面要执行的CSS之前。

更改后：

<!DOCTYPE html>
<html>
<head>
    &l

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Razas

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决移动端REM布局页面跳动的方案

一、将REM.js 提到要加载的CSS之前原来是这样的HTML://-&gt; 在页面最底部引入&lt;script src="../../js/user/user.js"&gt;&lt;/script&gt;&lt;/body&gt; JS://-&gt; 动态设置REM~function () { var desW = 640, //设计稿宽度 ...
复制链接

扫一扫