?

相信大家在面試的過程中總會被問到如何處理自適應這樣的相關問題，自適應其實就是根據視口的大小或者說用戶平臺的不同呈現出不同或相同的樣式，有這么幾種方案：

使用flexbox彈性布局的方法

固定一個某些寬度，使用一個模式，加上少許的媒體查詢方案

使用rem

---------------------------分------------割-------------------------------------?

淘寶rem的例子

看看淘寶在不同分辨率下，呈現的效果：

淘寶的效果跟網易的效果其實是類似的，隨著分辨率的變化，頁面元素的尺寸和間距都相應變化，這是因為淘寶的尺寸也是使用了rem的原因。在介紹它的做法之前，先來了解一點關于viewport的知識，通常我們采用如下代碼設置viewport:

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

這樣整個網頁在設備內顯示時的頁面寬度就會等于設備邏輯像素大小，也就是device-width。這個device-width的計算公式為：

設備的物理分辨率/(devicePixelRatio * scale)，在scale為1的情況下，device-width = 設備的物理分辨率/devicePixelRatio ?！?/p>

devicePixelRatio稱為設備像素比，每款設備的devicePixelRatio都是已知，并且不變的，目前高清屏，普遍都是2，不過還有更高的，比如2.5, 3 等，我魅族note的手機的devicePixelRatio就是3。淘寶觸屏版布局的前提就是viewport的scale根據devicePixelRatio動態設置：

在devicePixelRatio為2的時候，scale為0.5

在devicePixelRatio為3的時候，scale為0.3333

這么做目的當然是為了保證頁面的大小與設計稿保持一致了，比如設計稿如果是750的橫向分辨率，那么實際頁面的device-width，以iphone6來說，也等于750，這樣的話設計稿上標注的尺寸只要除以某一個值就能夠轉換為rem了。通過js設置viewport的方法如下：

//code from http://caibaojian.com/mobile-responsive-example.html 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的計算公式，font-size = deviceWidth / 10：

接下來要解決的問題是，元素的尺寸該如何計算，比如說設計稿上某一個元素的寬為150px，換算成rem應該怎么算呢？這個值等于設計稿標注尺寸/該設計稿對應的html的font-size。拿淘寶來說的，他們用的設計稿是750的，所以html的font-size就是75，如果某個元素時150px的寬，換算成rem就是150 / 75 = 2rem。總結下淘寶的這些做法：

• （1）動態設置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');
• （2）動態計算html的font-size document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
• （3）布局的時候，各元素的css尺寸=設計稿標注尺寸/設計稿橫向分辨率/10
• （4）font-size可能需要額外的媒介查詢，并且font-size不使用rem，這一點跟網易是一樣的。

最后還有一個情況要說明，跟網易一樣，淘寶也設置了一個臨界點，當設備豎著時橫向物理分辨率大于1080時，html的font-size就不會變化了，原因也是一樣的，分辨率已經可以去訪問電腦版頁面了。

?

比較網易與淘寶的做法

共同點：

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

不同點

• 淘寶的設計稿是基于750的橫向分辨率，網易的設計稿是基于640的橫向分辨率，還要強調的是，雖然設計稿不同，但是最終的結果是一致的，設計稿的尺寸一個公司設計人員的工作標準，每個公司不一樣而已
• 淘寶還需要動態設置viewport的scale，網易不用
• 最重要的區別就是：網易的做法，rem值很好計算，淘寶的做法肯定得用計算器才能用好了 。不過要是你使用了less和sass這樣的css處理器，就好辦多了，以淘寶跟less舉例，我們可以這樣編寫less：

//定義一個變量和一個mixin @baseFontSize: 75;//基于視覺稿橫屏尺寸/100得出的基準font-size .px2rem(@name, @px){@{name}: @px / @baseFontSize * 1rem; } //使用示例： .container {.px2rem(height, 240); } //less翻譯結果： .container {height: 3.2rem; }

?

總結：

所有的rem方案都是基于設計稿而言，大家不要被以上各種公式搞混。步驟如下

給html根節點設置一個基礎font-size值，然后頁面的所有元素布局均相對于該font-size值采用rem單位設定。

假設設計稿的尺寸為640px，iphone5的屏幕分辨率為320px，計算出來的font-size值就是 320 / 640 = 0.5，因為得出的font-size太小，不方便計算，且有的瀏覽器可能不兼容太小字號，所以將font-size放大100倍，所以最終計算出來的font-size為 320 / 640 * 100 = 50(px);?常見的分辨率下，font-size的值如下

deviceWidth = 320，font-size = 320 / 6.4 = 50px deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px deviceWidth = 500，font-size = 500 / 6.4 = 78.125px

頁面元素該如何設置寬高、邊距。假如一個div在設計稿上的尺寸為140px，則直接賦值為1.4rem。因為html的font-size是放大了100倍，所以計算rem時，要用設計稿的實際像素除以100，140px / 100 = 1.4rem; 最后實際的像素大小就會由deviceWidth跟設計稿的橫向寬 的 比例 自動計算出來。

?

---------------------------分------------割-------------------------------------?

?

以上內容摘自

流云諸葛——從網易與淘寶的font-size思考前端設計稿與工作流

移動端web app自適應布局探索與總結

感謝大神們的實踐總結~

?

轉載于:https://www.cnblogs.com/vicky1018/p/7726076.html

總結

以上是生活随笔為你收集整理的如何处理跨平台的自适应三的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。