用于定义全局html font-size 值，css单位使用rem

最新推荐文章于 2023-01-03 20:23:39 发布

RightHereWaitingFY

最新推荐文章于 2023-01-03 20:23:39 发布

阅读量740

点赞数

分类专栏： Css Js

本文链接：https://blog.csdn.net/luyundesign/article/details/114385388

版权

Js 同时被 2 个专栏收录

39 篇文章 2 订阅

订阅专栏

Css

10 篇文章 1 订阅

订阅专栏

css3单位rem：rem就是将根节点html的font-size的值作为整个页面的基准尺寸，

例如<html style="font-size:10px">那么 1rem=10px;

移动端效果图宽度设计为750px，例如，有一个图片，宽度为200px，高度为150px，落地到css中，

.className{
    width: 200rem; height: 150rem;
}

以下js，将动态设置html的font-size值

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

RightHereWaitingFY

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
用于定义全局html font-size 值，css单位使用rem

css3单位rem：rem就是将根节点html的font-size的值作为整个页面的基准尺寸，例如那么1rem=10px;移动端效果图宽度设计为750px，例如，有一个图片，宽度为200px，高度为150px，落地到css中，.className{ width: 200rem; height: 150rem;}(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientatio
复制链接

扫一扫