CSS rem布局 && 伪响应式

最新推荐文章于 2021-07-08 17:52:26 发布

LeeSayhi

最新推荐文章于 2021-07-08 17:52:26 发布

阅读量445

点赞数

分类专栏： CSS Javascript 文章标签： CSS

本文链接：https://blog.csdn.net/LeeSayhi/article/details/73293420

版权

Javascript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

以下脚本均放在 <head>标签中

rem布局

使用JS在设备尺寸resize时候，动态修改root的font-size大小。

(function(doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        if (clientWidth >= 750) {
            docEl.style.fontSize = '100px';
        } else {
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        }
    };
    if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

伪响应式

只要我们确认了用户的屏幕尺寸，我们就可以在一开始就确定我们的页面布局以及所需要的交互

(function(doc, win) {
    var screenWidth = 0, size = 'M', root = doc.documentElement;
    if (window.screen && screen.width) {
        screenWidth = screen.width;
        if (screenWidth > 1920) {
            // 超大屏，例如iMac
            size = 'L';
        } else if (screenWidth < 480) {
            // 小屏，如手机
            size = 'S';
        }
    }
    // 标记CSS
    root.className = size;
    // 标记JS
    win.SIZE = size;        
})(document, window);

上面的脚本在页面加载的一开始，就确定了是大屏，普通屏还是小屏，然后再执行响应的渲染和脚本执行。可以根据实际项目，修改上面的size变量。

典型的伪响应式代码如下：

.S .example {
  /* 移动端的样式 */
}

if (window.SIZE == 'S') {
  // 移动端的处理
} else {
  // 桌面端的处理
}

LeeSayhi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录