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

来源：互联网发布：海露滴眼液知乎编辑：程序博客网时间：2024/06/08 19:02

为了充分还原设计稿，适配各种屏幕大小，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.

0 0