动态rem解决移动前端适配

时间 2019-11-17

标签动态 rem 解决移动前端适配栏目无线繁體版

原文原文链接

动态rem解决移动前端适配

移动前端适配一直困扰不少人，我本身也是从最初的媒体查询，到后来的百分比，再到padding-top这种奇巧淫技，再到css3新单位vw这种过渡转变但这些都或多或少会有些问题，直到使用了动态rem 才真正再也不在适配这个问题上发愁只由于叫动态rem 是由于他是真正意义上随着屏幕的大小来变化的。css

rem

rem官方解释是 font size of the root element 字面意思就是根元素的font-size值也就是rem是相对于元素的html

以下代码：前端

<html>
  <meta charset="utf-8"/>
  <head>
  <style>
      html{ font-size:10px;}
     .p1{font-size:1rem;}
     .p2{ font-size:2rem;}
 </style>
 </head>
     <body>
         <p class="p1">这是一个1rem字体</p>
         <p class="p2">这是一个2rem的字体</p>
     </doby>
 </html>

从最终效果能够看出文档中元素的字体大小是基于html根元素的 p1的font-size为10px p2的font-size是20pxcss3

viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

在移动开发时咱们都会有上面这段代码sass

viewport :虚拟窗口大小
width: 控制viewport大小能够本身设定值如320px(不多用) 通常设置为device-width(设备宽度)
initial-scale 初始缩放比例即页面初次加载时的缩放比例默认为1
maximum-scale：用户可缩放到的最大比例

dpr(device pixel ratio)app

设备像素比dpr 要了解这一律念还得清楚另外两个概念iphone

设备物理像素函数

通俗的讲设备屏幕有多少个能够闪烁的点是一个具体的概念好比iphone6横向就有750个能够改变颜色的点相似与电视机若是家里有10年前买的大头电视，你趴在屏幕前仔细看能看到一个个RGB的点这就是设备的物理像素字体

设备独立像素.net

设备独立像素是一个虚拟的概念，如程序中的css 好比咱们将一个div宽度设置为10像素那么在pc上系统会将这个div显示在屏幕的10个点上

dpr = 设备物理像素/设备独立像素
程序中的1px占据设备上的几个最小物理点能够这么理解
iphone3G 设备物理像素320个点设备独立像素320px 那么dpr就是1
iphone6 设备物理像素750个点设备独立像素375px 那么dpr就是2
也就是咱们css中写的1px其实不等于设备实际上的那1px 也可能等于设备上的2px
根据dpr咱们就能够灵活的在移动端缩放页面比例
能够经过window.devicePixelRatio来获取dpr

动态rem

经过上面的rem,viewport,以及dpr咱们就能够完成咱们的终极适配了，告别死板写法再也不这样写死咱们知道了设备的dpr就能够明确的知道缩放多少，并且这样还解决了很难解决的1px横线的问题
咱们须要这样一段js代码

(function (doc, win) {
    console.log("dpr:"+win.devicePixelRatio); 
    var docEle = doc.documentElement,
    isIos = navigator.userAgent.match(/iphone|ipod|ipad/gi),
    dpr=Math.min(win.devicePixelRatio, 3);
    scale = 1 / dpr,

    resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
    docEle.dataset.dpr = dpr;

    var metaEle = doc.createElement('meta');
    metaEle.name = 'viewport';
    metaEle.content = 'initial-scale=' + scale + ',maximum-scale=' + scale;
    docEle.firstElementChild.appendChild(metaEle);
 
    var recalCulate = function  {
        var width = docEle.clientWidth;
        if (width / dpr > 640) {
            width = 640 * dpr;
        }
        docEle.style.fontSize = 20 * (width / 750) + 'px';
    };

    recalCulate
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvent, recalCulate, false);
})(document, window);

获取设备dpr
算出缩放比例 scale = 1/dpr
建立meta以及属性
将scale值赋给initial-scale，maximum-scale
meta插入到文档中
建立屏幕大小改变从新计算函数并监听

效果图点开看看哦！！

最终效果

使用sass同步psd

当咱们拿到psd的时候可能要把psd的图尺寸转换为rem，以前一个同事有一个很好的方法能够彻底按照psd的的尺寸来书写，但要用到sass，使用sass能够大大提升开发效率，下面是sass的一个mixin方法将rem和px作了转换以下hotcss.scss

@function px2rem( $px ){
    @return $px*750/$designWidth/20 + rem; //这句是否是感受很熟悉 这句其实跟上面的那段js是对应的 
}
$designWidth : 750; //如设计图是750

在咱们的style.scss中

@import 'px2rem.scss';
$designWidth : 750; //如设计图是750
.banner{width:px2rem(300)}//如设计稿上的banner是300px 就免去计算环节

转载请注明：小月博客 » 动态rem解决移动前端适配