移動端頁面的viewport以及布局設計

1.viewport

viewport在移動頁面中是相當重要的概念，引用兩篇文章：
一篇真正教會你開發移動端頁面的文章(一)
一篇真正教會你開發移動端頁面的文章(二)

2.如何根據psd稿件，設計頁面

在上面的后一篇文章有詳細的說明，主要是設置 viewport 中的縮放比例，以及 HTML 元素的font-size，設置尺寸時使用rem，但文字大小另行使用媒體查詢另行設置px單位

方法一：

1）動態設置 viewport 縮放比例

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

2）動態設置HTML的font-size

const rate = 10;  // 設置一個比例常數，可任意設置
document.documentElement.style.fontSize = document.documentElement.clientWidth / rate + 'px';

假設設計稿的總寬度是 W，那么 1rem 是 W/rate px；因此在設置設計稿尺寸w0時，其應該設置為 w0/(W/rate) rem

這種方法，在每次設置尺寸時 很有能除不盡，需要計算器，會比較麻煩

方法二：

1）設置 viewport 固定縮放比例（為1）

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

2. 動態設置HTML的font-size，將設備像素比帶入到HTML字體的大小中

const rate = 100;  // 設置一個比例常數，可任意設置
const W = 750;  // 實際設計稿的總寬度
document.documentElement.style.fontSize = rate * document.documentElement.clientWidth / W + 'px';  // 

在設置設計稿尺寸w0時，其應該設置為 w0/rate rem
因為 rate 可以取 10的倍數，計算實際尺寸時，比較方便

注：方法一，方法二 中的 js 代碼，最好一開始就運行

方法三：（使用vw布局）

vw單位實現彈性布局
我們先來看看這vw vh單位 w3c的官方解釋
vw：1% of viewport’s width
vh：1% of viewport’s height

viewport即瀏覽器可視區域大小
我們可以這樣理解 100vw = window.innerwidth, 100vh = window.innerheight
在移動端我們一般都可以認為，100vw就是屏幕寬度。若使用vw布局，就不需要再像rem那樣，在js中去動態設置根元素的font-size了，sass中只需要使用這個函數做轉換即可

// 以iphone7尺寸@2x 750像素寬的視覺稿為例
@function vw($px) {
    @return ($px / 750) * 100vw;
}

// 假設一個div元素在視覺稿中，寬度為120px，字體大小為12px
div {
    width: vw(120);
    font-size: vw(12);
}

其他文章

關於移動端頁面適配布局：
移動端Web頁面適配方案（整理版）
再聊移動端頁面適配，rem和vw適配方案.
【移動端布局】拋棄rem，使用vw.
flexible.js 移動端自適應方案.
如何在vue-cli3.0中使用postcss-plugin-px2rem 插件.