html5移動端頁面適配方案分析

一直以來移動端適配問題困擾著眾多前端開發者，因為眾多移動端裝置的解析度不盡相同，導致做到完美適配十分困難，以下方法均為本人在專案開發中所採用的，並且能滿足正常的開發需求，現在歸納總結一下，供各位參考。

作為移動端，可以放心大膽的使用vw。

為什麼把此方法排在第一位，因為它夠簡單粗暴，拿來既用（需要搭配rem使用），不用考慮其他的任何東西。

重點來了

html頁面設定meta標籤(該標籤在做移動端頁面時不用說肯定都要加上，如果引用的開源**可能會自動加上該標籤，則不用手動新增)

設定html元素的font-size屬性

html

解釋一下這裡面的引數具體是什麼。

（1）16，瀏覽器預設字型大小，這個無需過多解釋；

（2）3.75目前大多數設計圖分別有兩個尺寸，640或者750，可能750佔大多數（我們公司出的設計圖為750），那我們就拿750尺寸作為參照，這樣 3.75 == 1vw；

（3）我們求得乙個比率，然後我們根據這個比率，使用rem進行設定頁面的寬高，字型的大小等。這時1rem == 16px；

（4）但是我們頁面裡面的寬高px換算成rem太麻煩，比如高100px，寬200px ，如果手動進行計算再寫入頁面，那可能是乙個噩夢，這個時候我們可以考慮css預處理器，這裡我採用的是scss裡面的函式。我寫的有乙個scss語法入門，供各位參考。

1. 新建px轉換為rem方法

@function px2rem($px)
2. 使用該方法 這裡效果圖裡面是多少尺寸，就寫多少尺寸，比如某元素字型大小為24px
.aaa
某div高度為100px
.bbb

至此，vw適配法已經完成，此方法簡單粗暴，不需要思考，拿來既用，能保證所有移動端裝置所顯示內容尺寸完美適配。

這個更簡單粗暴

設定meta標籤

在body後面加上該方法

function bodyscale() 

bodyscale();

這個是手機**開源的適配方法

蘿蔔白菜，各有所愛，以上為三種手機端適配方法，本人均在專案中使用過，目前未發現任何問題，看個人需求，選擇適合自己專案的方法。前端道路尚未成功，同志仍需努力，共勉！

移動端 移動端頁面適配方案

這是mdn上的解釋 這個單位代表根元素的 font size 大小 例如 元素的font size 當用在根元素的font size上面時 它代表了它的初始值 也就是說，rem單位取值的大小和根元素html的font size取值直接相關。它跟html元素之間得關係為 html的fontsize值 ...

HTML5移動端適配

基準html 機型寬度 可視區域 螢幕比例 html font site 元素寬度 px 元素寬度 rem iphone6 plus 基準 414px 110px 200px 10rem iphone6 375px 375 414 0.9057 375 414 10 9.058 px iphone5...

移動端適配方案

最簡單的移動端適配方案 rem vw 1vw等於螢幕寬度的1 1vh等於螢幕高度的1 通常設計稿為750寬度，螢幕總寬度為100vw 那麼 100vw 750px 1px 1px 100 750 1px就等於0.13333333vw 把單位放大100倍便於計算 html設計稿畫素單位轉換為rem單位...