关于移动端rem 布局的一些总结-白红宇

关于移动端rem 布局的一些总结

阅读量：4085 次

发布时间：2019-05-25

本文共 2406 字，大约阅读时间需要 8 分钟。

1.rem是什么?

rem(font size of the root element)是指相对于根元素的字体大小的单位

2.为什么web app要使用rem？

实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏幕,根据变化html的字体大小来控制rem的大小,如不同html字体大小的计算下,rem值不同

第一个例子：html{
  font-size:10px;}a{
  width:1rem;height:1rem}10px = 1rem * 10px第二个例子：html{
  font-size:20px;}a{
  width:1rem;height:1rem}20px = 1rem * 20px推算出：10px  = 1rem 在根元素（font-size = 10px的时候）；20px  = 1rem 在根元素（font-size = 20px的时候）；40px  = 1rem 在根元素（font-size = 40px的时候）；

html设置成100px是为了方便我们计算，如 6rem等于600px。

一.常规情况下js根据屏幕宽度动态计算

(function(doc,win){    var docEl = doc.documentElement;    var resizeEvt = "onorientationchange" in win ? "orientationchange" : "resize";    var Timer = null;    function recalc(){        var clientWidth = docEl.clientWidth || win.innerWidth;        //设计稿是640px        var initSize = (clientWidth/640) * 100;        var fontSize = clientWidth > 768 ? 120 : (initSize < 50 ? 50 : initSize);        docEl.style.fontSize = fontSize + "px";    }    doc.addEventListener("DOMContendLoaded",recalc,false);    //转屏    win.addEventListener(resizeEvt,function(){        clearTimeout(Timer);        Timer = setTimeout(recalc,300)    },false);    //pageshow,缓存相关    win.addEventListener("pageshow",function(e){        if(e.persisted){            clearTimeout(Timer);            Timer = setTimeout(recalc,300)        }    },false);    // 初始化    recalc();})(document,window);

设计稿一般都是640宽的，psd转换为 html+css 的时候我们是按照320来做的（用css像素来度量的话，iPhone4、iPhone5都是这个尺寸）。在没有使用rem而是直接把字体、高度之类的写死的时候，在ps中量出来宽高、字体什么的每次都得手动除以2再写到css中。。现在我设定的基准是320下面html{font-size:50px}，主要是方便每次在ps中测量完了之后不用除以2.

二.rem布局字体不用rem值是因为在Retina屏幕下会变的很大,而这时候我们更希望在大屏幕上显示更多的内容,在淘宝中是用了dpr是判断

if (!dpr && !scale) {    var isAndroid = win.navigator.appVersion.match(/android/gi);    var isIPhone = win.navigator.appVersion.match(/iphone/gi);    var devicePixelRatio = win.devicePixelRatio;    if (isIPhone) {        // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {            dpr = 3;        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){            dpr = 2;        } else {            dpr = 1;        }    } else {        // 其他设备下，仍旧使用1倍的方案        dpr = 1;    }    scale = 1 / dpr;}document.documentElement.setAttribute('data-dpr', dpr);

div {
      width: 1rem;    height: 0.4rem;    font-size: 12px; // 默认写上dpr为1的fontSize}[data-dpr="2"] div {
      font-size: 24px;}[data-dpr="3"] div {
      font-size: 36px;}

转载地址：http://pzeni.baihongyu.com/

你可能感兴趣的文章