如何處理跨平台的自適應三

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

使用flexbox彈性布局的方法

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

使用rem

---------------------------分------------割-------------------------------------

看看**在不同解析度下，呈現的效果：

**的效果跟網易的效果其實是類似的，隨著解析度的變化，頁面元素的尺寸和間距都相應變化，這是因為**的尺寸也是使用了rem的原因。在介紹它的做法之前，先來了解一點關於viewport的知識，通常我們採用如下**設定viewport:

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

裝置的物理解析度/(devicepixelratio * scale)，在scale為1的情況下，device-width = 裝置的物理解析度/devicepixelratio 。·

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 
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。總結下**的這些做法：

最後還有乙個情況要說明，跟網易一樣，**也設定了乙個臨界點，當裝置豎著時橫向物理解析度大於1080時，html的font-size就不會變化了，原因也是一樣的，解析度已經可以去訪問電腦版頁面了。

共同點：

不同點

//定義乙個變數和乙個mixin

@basefontsize: 75;//基於視覺稿橫屏尺寸/100得出的基準font-size
.px2rem(@name, @px): @px / @basefontsize * 1rem;
}

//使用示例：

.container

//less翻譯結果：

.container

所有的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思考前端設計稿與工作流

感謝大神們的實踐總結~

如何處理跨平台的自適應三

自適應問題的處理

跨域iframe的高度自適應

delete方法跨域如何處理前後端的跨域請求

如何處理跨平台的自適應三

自適應問題的處理

跨域iframe的高度自適應

delete方法跨域 如何處理前後端的跨域請求

相關推薦

delete方法跨域如何處理前後端的跨域請求