移動端web開發的設計稿與工做流

時間 2019-11-15

標籤移動 web 開發設計欄目無線简体版

原文原文鏈接

這裏有一份簡潔的前端知識體系等待你查收，看看吧，會有驚喜哦~若是以爲不錯，懇求star哈~javascript

致謝

一直以來移動端適配即是困擾本身的一個難題，今天休息，查閱了不少資料將其整理出來。本文中不少作法是直接借鑑了網上的文章，主要有從網易與淘寶的font-size思考前端設計稿與工做流跟手機端頁面自適應解決方案—rem佈局進階版（附源碼示例），向大神致謝。css

移動設備的分辨率

設備	屏幕尺寸	邏輯分辨率(pt)	Reader	物理分辨率(px)
iPhone 3GS	3.5寸	320*480	@1x	320*480
iPhone 4/4S	3.5寸	320*480	@2x	640*960
iPhone 5/5S/5C	4.0寸	320*568	@2x	640*1136
iPhone 6/6S	4.7寸	375*667	@2x	750*1134
iPhone 6/6S Plus	5.5寸	414*736	@3x	1242*2208

pt是邏輯分辨率，簡單理解就是跟屏幕的尺寸有關係，是個長度跟視覺的單位。
px是物理分辨率，簡單理解爲像素點，跟屏幕的尺寸是不要緊的。

小結：pt與px的關係是，一個單位的pt裏包含幾個px，包含的px越多，則越清晰。但由於人視網膜的關係，最多隻能識別單位pt裏2個像素點，大於2個像素點，人眼識別不出，因此6plus看上去不會比6更清晰。html

移動端web開發的設計稿與工做流

移動端web開發的難點之一是適應各類分辨率的移動設備——衆所周知，應該使用rem。但實際操做中，如何肯定html上的font-size，是一個難點。通常有如下幾種方式：前端

使用CSS3媒體查詢

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
複製代碼

用CSS3媒體查詢明顯不足有：java

須要寫大量的媒體查詢以適應不一樣的設備
媒體查詢的範圍不必定合適
每一個媒體查詢裏的font-size難以定義
每次給元素設置rem都須要根據某個分辨率html的font-size去算，工做量大。

小結：CSS3媒體查詢理論上能夠，但操做起來不靈活git

簡單問題簡單解決

有些web app比較簡單，記住一個開發原則就好：文字流式，控件彈性，圖片等比縮放。以圖描述： github

網易的作法

網易的頁面複雜度較高，隨着分辨率增大，網易頁面的效果也會發生明顯變化，要達到這種效果，就須要使用rem做爲單位，且html的font-size是經過js計算出來的。網易移動web的工做流能夠總結以下：web

第一步設置視口的viewport

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">sass

第二步以iphone6/6S設計稿爲基準肯定body及頁面元素的尺寸

網易網頁的設計稿是基於iphone6/6S，物理分辨率（設計稿寬度）爲750px，邏輯分辨率（deviceWidth）爲375。爲了計算方便，先拿設計稿豎着的橫向分辨率除以100獲得body元素的寬度：750 / 100 = 7.5rem 同理，佈局時頁面上的元素的尺寸，能夠拿設計圖標註的尺寸除以100獲得。bash

第三步計算html的fontSize以適配各個尺寸的屏幕

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
複製代碼

第四步細節調整

當deviceWidth大於設計稿的橫向分辨率時，html的font-size始終等於橫向分辨率/body元素寬。

之因此這麼幹，是由於當deviceWidth大於640時，則物理分辨率大於1280，應該去訪問pc網站了。只需將第三步作下調整便可。

var deviceWidth = document.documentElement.clientWidth;
    if(deviceWidth > 640) deviceWidth = 640;
    document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
複製代碼

可能須要額外的媒介查詢

網頁上有一些結構是不須要隨着屏幕變大而相應調整，好比底部導航欄，此時可使用媒體查詢。

淘寶的作法

知識預備，瞭解viewport

一般咱們採用以下代碼設置viewport:

<meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
複製代碼

這樣整個網頁在設備內顯示時的頁面寬度就會等於設備邏輯像素大小，也就是device-width。這個device-width的計算公式爲：設備的物理分辨率/(devicePixelRatio * scale)

devicePixelRatio稱爲設備像素比，每款設備的devicePixelRatio都是已知，而且不變的，目前高清屏，廣泛都是2，不過還有更高的，好比2.5,3等。淘寶觸屏版佈局的前提就是viewport的scale根據devicePixelRatio動態設置.

在devicePixelRatio爲2的時候，scale爲0.5
在devicePixelRatio爲3的時候，scale爲0.3333

這麼作目的是爲了保證頁面的大小與設計稿保持一致，好比若是是750的橫向物理分辨率，那麼實際頁面的device-width也等於750。

接下來要解決的問題是：元素的尺寸該如何計算，好比說設計稿上某一個元素的寬爲150px，換算成rem應該怎麼算呢？這個值等於設計稿標註尺寸/該設計稿對應的html的font-size。拿淘寶來講的，他們用的設計稿是750的，因此html的font-size就是75，若是某個元素時150px的寬，換算成rem就是150 / 75 = 2rem。

第一步動態設置viewport的scale

var scale = 1 / devicePixelRatio;
    document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
複製代碼

第二步動態計算html的font-size

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
複製代碼

由於第一步已經根據devicePixelRatio動態設置scale，此時device-width便等於頁面的橫向物理分辨率（document.documentElement.clientWidth），也就是設計稿的的橫向物理分辨率。淘寶的作法是，設計稿是750，那麼html的font-size就是75。

第三步肯定佈局時各個元素的尺寸

佈局的時候，各元素的css尺寸 = 設計稿標註尺寸/設計稿橫向分辨率/10 = 設計稿標註尺寸/html的font-size

第四步細節調整

font-size可能須要額外的媒介查詢，而且font-size不使用rem，這一點跟網易是同樣的。
跟網易同樣，淘寶也設置了一個臨界點，當設備豎着時橫向物理分辨率大於1080時，html的font-size就不會變化了，緣由也是同樣的，分辨率已經能夠去訪問電腦版頁面了。

與網易的作法比較

共同點：

都能適配全部的手機設備，對於pad，網易與淘寶都會跳轉到pc頁面，再也不使用觸屏版的頁面都須要動態設置html的font-size
佈局時各元素的尺寸值都是根據設計稿標註的尺寸計算出來，因爲html的font-size是動態調整的，因此可以作到不一樣分辨率下頁面佈局呈現等比變化
容器元素的font-size都不用rem，須要額外地對font-size作媒介查詢
都能應用於尺寸不一樣的設計稿，只要按以上總結的方法去用就能夠了

不一樣點

淘寶還須要動態設置viewport的scale，網易不用
網易的作法，rem值很好計算，淘寶的作法可能須要使用less和sass的css處理器

阿里團隊的高清方案佈局

高清方案的源碼

'use strict';

    /**
     * @param {Boolean} [normal = false] - 默認開啓頁面壓縮以使頁面高清;  
     * @param {Number} [baseFontSize = 100] - 基礎fontSize, 默認100px;
     * @param {Number} [fontscale = 1] - 有的業務但願能放大必定比例的字體;
     */
    const win = window;
    export default win.flex = (normal, baseFontSize, fontscale) => {
      const _baseFontSize = baseFontSize || 100;
      const _fontscale = fontscale || 1;

      const doc = win.document;
      const ua = navigator.userAgent;
      const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
      const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
      const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
      const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
      let dpr = win.devicePixelRatio || 1;
      if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
        // 若是非iOS, 非Android4.3以上, 非UC內核, 就不執行高清, dpr設爲1;
        dpr = 1;
      }
      const scale = normal ? 1 : 1 / dpr;

      let metaEl = doc.querySelector('meta[name="viewport"]');
      if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        doc.head.appendChild(metaEl);
      }
      metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
      doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`;
    };
複製代碼

原理

與上述淘寶的原理一致。 動態設置 html 的font-size, 同時根據設備DPR調整頁面的縮放值，此時device-width便等於頁面的橫向物理分辨率（document.documentElement.clientWidth），也就是設計稿的的橫向物理分辨率。

優點

引用簡單，佈局簡便
根據設備屏幕的DPR,自動設置最合適的高清縮放。
保證了不一樣設備下視覺體驗的一致性。（老方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多）
有效解決移動端真實1px問題（這裏的1px 是設備屏幕上的物理像素）

使用

此方案也是默認 1rem = 100px，佈局時，根據設計稿尺寸/100便可獲得物理分辨率的尺寸

注意事項

若是元素的寬度超過效果圖寬度的一半（效果圖寬爲640或750），果斷使用百分比寬度，或者flex佈局。能夠避免相似於在 iphone6 上沒問題，在 iphone5上會有橫向滾動條的問題
此方案是根據設備的dpr動態設置html的font-size，且默認DPR是2，1rem = 100px，若是設計稿是iphone 6 sp (dpr = 3)，將代碼的最後的flex(false, 100, 1)修改爲flex(false, 66.66667, 1)

如何與設計師協做

視覺設計階段，設計師按寬度750px（iPhone 6）作設計稿，除圖片外全部設計元素用矢量路徑來作。設計定稿後在750px的設計稿上作標註，輸出標註圖。同時等比放大1.5倍生成寬度1125px的設計稿，在1125px的稿子裏切圖。
輸出兩個交付物給開發工程師：一個是程序用到的@3x切圖資源，另外一個是寬度750px的設計標註圖。之因此要在@3x的圖裏切，這是由於如今市面上也有很多像魅藍note這種超高清屏幕，devicePixelRatio已經達到3了，這個切圖保證在全部設備都清晰顯示。
開發工程師拿到750px標註圖和@3x切圖資源，完成iPhone6（375pt）的界面開發，須要使用上文提到的適配方法。
適配調試階段，基於iPhone 6的界面效果，分別向上向下調試iPhone 6 plus（414pt）和iPhone 5S及如下（320pt）的界面效果。由此完成大中小三屏適配。