移動端適配頁面快速搭建

varnull發表於2017-01-20

遙想去年入前端坑的時候，就很快遇到了移動端頁面的開發，天(er)真(bi)的我立馬上去量設計稿，然後擼起袖子就是幹！可是開啟除錯一看亂套了，先不說佈局上的問題，就是大小看起來也不太對啊，太大了！然後就去問老司機，他說尺寸你要除以2才行，我心裡挺鬱悶的，為啥啊。。當時專案緊，就先這麼搞，然後加上百分比佈局，完成了第一次的開發任務。。。

但是！這只是叫完成，我非常不喜歡心裡有梗的感覺，我覺得這事兒沒這麼簡單，而且隨著後期開發的進行，有一天設計mm給我說你這個線好粗啊，能不能再細點兒，我心中一萬個不(cao)情(ni)願(ma)飛過，我這已經是1px了啊。。。

還有最關鍵的我發現用百分比佈局有個極大的缺陷，就是當你感知設計的==設計意圖==的時候，（我們的設計師同學們的==設計意圖==有多重要，我覺得好的設計師一定是設計意圖非常犀利的），有些設計元素並不是單純的左對齊，右對齊，或者和某個元素有某種視覺上的聯絡。也就是說，這個時候百分比佈局就要頭疼了，這個元素到底是百分之多少呢，用尺子量一下，可以啊，可是你把裝置螢幕放大或者縮小看看，哭還是不哭？。。。。

是的，沒錯，我哭了。。。

痛定思痛~我覺得開始調研，開始搞一個讓我以後開發再也不哭的方案，之後的一個星期內我調研了當時所有的開發方案，那個時候不光調研還一邊理解了一些新的概念來輔助我進行改革，那時候我才知道了尼瑪為啥我要除以2，知道了裝置解析度，裝置畫素，css畫素，頁面視口，em和rem等等玩意兒。最終我選擇了flexible.js這個庫來幫助我做這件事兒，其實這個庫程式碼很短，完全可以理解，程式碼可以去github上瞅一瞅，其實簡單說，它利用==動態讀取裝置寬度並結合裝置的畫素比 =》動態改變html的font-size大小 + 頁面縮放比例 =》影響以rem為單位的元素的最終呈現==。嗯嗯就是這麼回事兒。

所以呢，要快速搭建移動頁面適配還是需要一步一步準備好的：

  • 第一步：搭建頁面基本模板，引入flexible.js

    <!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <meta content="yes" name="apple-mobile-web-app-capable">
      <meta content="yes" name="apple-touch-fullscreen">
      <meta content="telephone=no,email=no" name="format-detection">
      <script type="text/javascript" src="./flexible.min.js"></script>

  </head>

  <body>
  </body>
</html>複製程式碼

  • 第二步：準備scss工具函式，幫助還原設計稿時自動換算px到rem（這意味著你對著設計稿就可以直接擼！設計稿是多少px你就寫多少px，完全無痛開發，和你開發pc端寫死px趕腳一模一樣）

@charset "utf-8";
/*
    @author xiao
    @des: APP端基礎方法
    @使用心得:
        -適配方案參考淘寶開源庫lib.flexible
        -佈局rem動態適配
        -字型dpr動態適配
        -和文字相關的佈局用px寫死比較好。。。因為用rem會和沒有用rem佈局的字型有錯位
        -目前市面上有三種代表的適配方案：
            1. 直接750設計稿除以2適配所有機型，佈局採用百分比：代表網站 拉勾網
            2. 動態改變html font-size基準，所有元素以rem適配：代表網站 小米網
            3. 動態改變html font-size基準，所有除字型相關元素以外的rem適配，字型只按解析度適配：代表網站 淘寶網
 */

/**
 * 基本思想描述：
 * 多屏適配佈局問題
 * 移動端佈局，為了適配各種大屏手機，目前最好用的方案莫過於使用相對單位rem。
 * 基於rem的原理，我們要做的就是: 針對不同手機螢幕尺寸和dpr動態的改變根節點html的font-size大小(基準值)。
 * 這裡我們提取了一個公式(rem表示基準值)
 * rem = document.documentElement.clientWidth * dpr / 10
 * 說明：
 * 1）乘以dpr，是因為頁面有可能為了實現1px border頁面會縮放(scale) 1/dpr 倍(如果沒有，dpr=1)。
 * 2）除以10，是為了取整，方便計算(理論上可以是任何值)
 * 所以就像下面這樣，html的font-size可能會：
 * iPhone3gs: 320px / 10 = 32px
 * iPhone4/5: 320px * 2 / 10 = 64px
 * iPhone6: 375px * 2 / 10 = 75px
 * iPhone6plus: 414 * 3 / 10 = 124.2px
 */

/*
    px轉換成rem
 */
@function px2rem($px, $base-font-size: 75px) {
    @if (unitless($px)) {
        //@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2rem($px + 0px); // That may fail.
    } @else if (unit($px) == rem) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1rem;
}

/*  
    預設已iPhone6的750為基準開發
    font-size 不推薦轉換成rem
    原因：我們不希望文字在Retina螢幕下變小，
    另外，我們希望在大屏手機上看到更多文字，
    以及，現在絕大多數的字型檔案都自帶一些點陣尺寸，通常是16px和24px，所以我們不希望出現13px和15px這樣的奇葩尺寸。
    注意設計稿是2x螢幕, 所以1x螢幕需要除以2
 */
@mixin font-dpr($font-size){
    font-size: $font-size / 2;

    [data-dpr="2"] & {
        font-size: $font-size;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 1.5;
    }
}

/**
 *  為了和字型適配一樣的非字型元素準備的轉化方法    
 */
@mixin px-dpr($property, $size, $others:""){

    #{$property}: $size / 2 #{$others};

    [data-dpr="2"] & {
        #{$property}: $size #{$others};
    }

    [data-dpr="3"] & {
        #{$property}: $size * 1.5 #{$others};
    }
}複製程式碼

需要注意的就是，一般設計稿都是以750畫素寬設計的，所以$base-font-size預設是75，如果你們的設計稿不是這個750，相應的$base-font-size也應該進行修改。

  • 第三步：開擼！
.box {
  width: px2rem(14);
  height: px2rem(14);
}複製程式碼

使用上應該沒有什麼問題了，就是有時可能頁面縮放會導致一些問題，比如echarts使用時縮放頁面會導致其顯示不正常，這時候在頭上加入：

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">複製程式碼

flexible就不會再縮放，也就犧牲了1px和高清圖片的問題，影響不大，其他問題我暫時還沒遇到過，總之，快速搭建完成後，在移動端適配上你就不用再費任何精力了~看著設計稿還原就好啦~！

相關文章