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

最新推荐文章于 2025-05-20 16:20:45 发布

原创最新推荐文章于 2025-05-20 16:20:45 发布 · 5.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#h5 #移动 #布局 #字体 #rem

h5 专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给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 补充:

实际项目中发现，当手机旋转为横屏时，resize代码在dom元素未渲染前已执行，需要延迟，该部分代码替换为：

win.addEventListener(evt, function(){
    fn();
    setTimeout(fn,50);
}, false);
doc.addEventListener("DOMContentLoaded", function(){
    fn();
    setTimeout(fn,50);
}, false);

2019.08.20 补充：

基于现在都是用ES6开发，根据最近项目的实际情况，重新整理了下代码。注意：需要加babel兼容浏览器

const pageResize = () => {
  const docEle = document.documentElement;
  const fn = () => {
    const width = docEle.clientWidth > 750 ? 750 : docEle.clientWidth;
    if (width) {
      docEle.style.fontSize = 20 * (width / 375) + "px"
    }
  };
  const timeFn = () => {
    fn();
    setTimeout(fn, 50);
  };

  window.addEventListener('resize', timeFn, false);
  window.addEventListener('orientationchange', timeFn, false);
  fn();
};