動態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解決移動前端適配

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。