解决移动端自适应问题——rem

最新推荐文章于 2024-07-31 02:32:11 发布

土豆西瓜霜

最新推荐文章于 2024-07-31 02:32:11 发布

阅读量2k

点赞数

分类专栏：前端文章标签： css3 rem 自适应

本文链接：https://blog.csdn.net/m0_37458581/article/details/70890269

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

为了充分还原设计稿，适配各种屏幕大小，px已然是不能用了，em这种相对父元素来计算的太麻烦，对此还是rem靠谱，首先介绍下rem:
rem是css3引进的新单位，在W3C-官网是这样描述rem的——”font size of the root element”,
我们在页面引入如下一段js

(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 / 7.5) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

这段js的意思就是动态设置html根元素的font-size,由于我们设计稿款是750px基于iPhone6设计，在这里clientWidth是获取当前屏的宽，这里应该是根元素的font-size=(clientWidth/750)*100=50px，让1rem等于设计稿上100px便于计算，例如iphone6屏宽375换算应该是：50*7.5=375,所以width=7.5rem,对于设计稿中的字体是28px,css应该就是：font-size=0.28rem;当显示屏是iphone5时，相应根元素的font-size变小，页面字体布局相应变化，便达到自适应的目的。（如果设计稿是基于650,一样换算font-size=(clientWidth/650)*100）。
对于这段代码中 resizeEvt是判断当前窗口有没有orientationchange这个方法，如果有便返回没有就返回resize,orientationchange与resize同时监听手机旋转横屏的事件，就是当屏幕旋转之后重新计算font-size.