現在很多專案都需要做響應式或者自適應的來適應我們不同螢幕尺寸的手機，電腦等裝置，本文就來為大家介紹一下html5移動端自適應的方法。
螢幕自適應方案
介紹方案之前，首先還是交代一下專案背景與需求，畢竟一切方案也不能脫離實際需求。
需求與背景
自適應方案
rem（flexible）
rem（font size of the root element）是指相對於根元素的字型大小的單位。簡單的說它就是乙個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對于父元素的字型大小的單位。它們之間其實很相似，只不過乙個計算的規則是依賴根元素乙個是依賴父元素計算。
所以簡而言之，就是根據螢幕寬度設定 html 標籤的 font-size。 再在布局時使用 rem 單位來布局，就可以達到自適應的目的。
使用此方案，可以借助手淘的開源專案lib-flexible。它可以自定幫你設定html 標籤的 font-size等。將1rem設定為螢幕的1/10。
關於 rem 方案，大漠老師在使用flexible實現手淘h5頁面的終端適配中進行了詳細的介紹。建議大家閱讀一下。
如你所見，大漠老師也在近期對文正進行了更新，建議大家使用更方便的 vw 方案。
vwvw 是視口寬度的1/100，用 vw 來做自適應再合適不過了。
比如如果你的設計圖是 750px 的寬度。 對於 75px 的元素就可以設定為 10vw。 這樣在寬度為 375px 的手機上的表現就是37.5px。
當然，如果我們把每個 px 標註都手動轉換的話，那也是很大的工作量，
postcss-px-to-viewport可以自定幫你轉換為 vw。 你只需要在配置時指定設計圖寬度就可以了。
我的方案 vw + rem
vw 雖好，可惜卻無法滿足我的需求。因為 vw 是整個視口寬度的1%，如果單純採用 vw 方案，是無法限制最大、最小寬度的。
於是我便採用了 vw + rem。 類似於
如果螢幕寬度在需要自適應的寬度之內，則將html 標籤的 font-size設定為 10vw。如果螢幕寬度超過最大或最小限制的話。則將html 標籤的 font-size設定為固定值。類似於lib-flexible，我們將1rem設為了螢幕的1/10。
具體 css 如下：
html當然，這樣在布局時，我們就需要使用rem單位來布局了。 當然設計圖標註px轉rem單位同樣有現成的工具。博主使用的是postcss-pxtorem。body
@media screen and (max-width: 320px)
body
}@media screen and (min-width: 800px)
body
}
遇到的問題：
小數畫素問題
由於我們的方案，所有元素根據螢幕寬度來自適應。因而很難保證轉換後的畫素為整數畫素。
在未接觸前端，或者說h5開發之前並沒有認真考慮過小數畫素的問題，最初以為就是在可現實的精度上四捨五入。真正開發時發現並不是這樣的。
比如下面這個例子，同樣的畫素值表現就不一樣：
ios、macos裝置最小畫素好像支援到了0.5px，所以上面的例子在蘋果裝置上表現並不是很明顯。
但是畢竟大部分裝置還是android和windows系統。
那麼，到底瀏覽器是如何處理小數畫素的呢？
瀏覽器在渲染時所做的捨入處理只是應用在元素的渲染尺寸上，其真實佔據的空間依舊是原始大小。
也就是說如果乙個元素尺寸是 0.625px，那麼其渲染尺寸應該是 1px，空出的 0.375px 空間由其臨近的元素填充；同樣道理，如果乙個元素尺寸是 0.375px，其渲染尺寸就應該是 0，但是其會佔據臨近元素 0.375px 的空間。
那麼在我們的方案裡會出現什麼問題呢？
對於第乙個問題，一般都會出現在標註為1px的地方。所以大部分的外掛程式 postcss-pxtorem 或者 postcss-px-to-viewport 都提供了最小轉換畫素的選項。
我們只要指定最小轉換畫素，對於比較小的畫素（如：1px），就不轉換為rem或vw了。當然1px在視網膜屏同樣存在過粗的問題。
對於剩下的幾個問題，目前本人也沒找到特別好的辦法，畢竟很多地方相差1px是可以接受的。只有一些比較小的元素會表現的比較明顯，本人的解決辦法是不通過外掛程式自動轉換為rem或vw，而是通過js根據裝置寬度，計算出該元素在該裝置下實際的px。取整後動態地設定到元素的style上。
1px問題
由於上面小數畫素的問題，我們並沒有對1px的元素進行轉換，所以對於750px的設計圖上1px的細線，在螢幕寬度為375px的iphone6上依舊為1px，按比例應該是0.5px。所以設計同學會問：「為什麼這條細線變粗了？」 我們也很無奈啊，因為0.5px顯不出來啊……
但是轉念一想，對於dpr=2甚至更高的裝置，1px是由多個物理畫素渲染的，其實是可以顯示更細的線的。那麼這樣才能畫出更細的線呢？
以上方案各有各的特點，2、3兩個方案畫出來的其實是0.5px，而1、4兩個方案畫出來的更接近物理畫素的1px。
cursor:pointer 元素點選背景變色的問題
對於新增了 cursor:pointer 屬性的元素，在移動端點選時，背景會高亮。
為元素新增 -webkit-tap-highlight-color: transparent; 屬性可以隱藏背景高亮。
android瀏覽器下line-height垂直居中偏離的問題
我們常用的垂直居中方式就是使用line-height，但是這種方法在android裝置下並不能完全居中。
具體原因是因為android中文字型排版的問題，可以參考 知乎：android瀏覽器下line-height垂直居中為什麼會偏離？
通過設定字型，確實能夠解決一部分偏離的問題。但仍然會出現一些略微偏離的情況，據說與行高奇數偶數有關。不過已經不太容易分辨了，如果還是不能接受的話建議通過設定上下padding的方式進行垂直居中，再根據具體情況進行微調。
html5頁面自適應移動端
1 下面是我們經常用到的一些標籤，由於瀏覽器的差異，並不能百分百相容。2 百分比法，css中的百分比中的百指的是父元素，所有百分比都是這樣的。子元素寬度50 那麼父元素的寬度就是百，子元素的padding left 50 父元素的寬度是百，子元素的margin top 20 那麼父元素的高是百。所以...
移動頁面HTML5自適應手機螢幕寬度
標籤 網上關於這方面的文章有很多，重複的東西本文不再贅述，僅提供思路，並解釋一些其他文章講述模糊的地方。1 使用meta標籤，這也是普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。首先解釋該標籤的含義 解釋 c...
移動頁面HTML5自適應手機螢幕寬度
網上關於這方面的文章有很多，重複的東西本文不再贅述，僅提供思路，並解釋一些其他文章講述模糊的地方。1 使用meta標籤，這也是普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。首先解釋該標籤的含義 解釋 cont...