h5页面基础：自适应移动端

最新推荐文章于 2024-08-16 15:34:57 发布

大力酱

最新推荐文章于 2024-08-16 15:34:57 发布

阅读量5.3k

点赞数 1

分类专栏： h5 文章标签： h5 移动布局字体 rem

本文链接：https://blog.csdn.net/p493794782/article/details/70210512

版权

本文介绍了如何使用rem.js实现H5页面的自适应移动端布局。通过设置根元素字体大小，以rem为单位布局，确保元素尺寸随屏幕分辨率变化。以750px设计稿为例，一个100px高的div在375px屏幕宽度下应设为2.5rem。文章还提及了横屏时的调整和最新的ES6代码实践。

摘要由CSDN通过智能技术生成

给h5页面布局前，先在body底部引入rem.js，来自适应不同分辨率的屏幕。

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth > 750? 750:docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 375) + "px");
        };

    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);

}(document, window));

获取当前的屏幕宽，初始化根元素的字体大小，以rem为单位进行布局，页面中的元素大小会随着根元素字体大小变化而变化。

当屏幕宽为375px，根元素字体大小为20px。

以750px的设计稿为例，页面中有一个高为100px的div，则它的高度为 100/2/20 = 2.5rem

2017.06.07 补充:

实