CSS rem布局 && 伪响应式

来源：互联网发布：intent 获取数据编辑：程序博客网时间：2024/04/30 06:33

以下脚本均放在 <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 {  // 桌面端的处理}

阅读全文

0 0