移動端網頁的自適應方案-淘X網和慕X網比較

移動端的網頁佈局林林總總，眾說紛紜，至今麼有一個統一的方案。

我們只能在摸索中前進。。。於是，就有了2個網站的比較：

一、2個網站都選擇rem相對單位

簡單解釋：如果將HTML的根字體設為62.5%，首先你得知道這是什麼意思，瀏覽器的默認字體是16px，縮小為62.5%，就是16*62.5%=10px；10px=1rem；設為10px這個數字也是為了方便我們計算，例如，設計稿上是20px，我們通過這個單位換算就是2rem

二、淘X網的做法：

1、viewport的設置：

在淘寶網上可以看出來，viewport設置為變量，根據js來判斷縮放及寬度的。

2、具體比較：

用js來控制，並設置viewport

這是在6s p 下顯示的結果。下面是iPhone 5 下顯示：

這是iPhone 5下顯示的js代碼

可以看出來，viewport的屬性有明顯的不同。是個案嗎？我們再找個案例看一下。

三、這是慕X網的：

⑴、 viewport，設置為固定的，如下

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

⑵、 js設置如下：

js控制字體大小

⑶、在iPhone6p的顯示，html的根字體大小如下：

font-size為22.08px

⑷、在iPhone5的顯示：

iPhone5字體大小

這2種方法，你選哪一種呢？

這是個見仁見智的問題，反正我經常用第二種，覺得第一種有些小複雜。你呢？