html布局的适配 rem，font-size

最新推荐文章于 2025-05-17 13:39:32 发布

河东_api

最新推荐文章于 2025-05-17 13:39:32 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： html rem font-size

本文链接：https://blog.youkuaiyun.com/qq_40578459/article/details/99314644

本文详细介绍如何使用REM单位实现响应式布局，使网页在不同屏幕尺寸下保持良好的视觉效果。通过动态调整html标签的font-size，使得1rem等于100px，从而让页面元素随屏幕变化自动缩放。

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

对于html布局随着屏幕的增大而增大，font-size也是一样，详细讲解一哈

##第一步
1、刚开始做页面布局的时候大家大部分都是用用px来作为单位，虽然是可以的，但是这个字体的大小就被固定死了，不管是屏幕增大还是减小，字体都是不变的，这样往往达不到我们需要的结果，布局的结果也不是很友好，所以我们需要一个长度单位来适配就是 rem，刚开始学的时候特别的陌生因为没看过这样的单位，今天就带大家来了解一下什么是rem
首先我们需要确定我们布局的版心，直接给你们一行代码直接放在script标签里就行了

代码片.

// An highlighted block
/**rem.js */
(function(designWidth, maxWidth) {
    var doc = document,
        win = window;
    var docEl = doc.documentElement;
    var tid;
    var rootItem, rootStyle;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (!maxWidth) {
            maxWidth = 540;
        };
        if (width > maxWidth) {
            width = maxWidth;
        }
        //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
        var rem = width * 100 / designWidth;
        //兼容UC开始
        rootStyle = "html{font-size:" + rem + 'px !important}';
        rootItem = document.getElementById('rootsize') || document.createElement("style");
        if (!document.getElementById('rootsize')) {
            document.getElementsByTagName("head")[0].appendChild(rootItem);
            rootItem.id = 'rootsize';
        }
        if (rootItem.styleSheet) {
            rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
        } else {
            try {
                rootItem.innerHTML = rootStyle;
            } catch (f) {
                rootItem.innerText = rootStyle;
            }
        }
        //兼容UC结束
        docEl.style.fontSize = rem + "px";
    };
    refreshRem();

    win.addEventListener("resize", function() {
        clearTimeout(tid); //防止执行两次
        tid = setTimeout(refreshRem, 300);
    }, false);

    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(320, 640);

我们的版心就是长度最大640px;最小320px;来达到适配，
1、等你加载页面的时候你的html标签会给自己设置一个 font-size的大小
所以rem就是作为font-size的相对单位，我们标准的font-size：100px;所以
1rem = 100px;所以我们不管设置字体的大小还是宽高，10px = 0.1rem;就会随着屏幕的大小改变了