這樣可以減少頁面的高度3當(dāng)瀏覽器窗口小于等于480px的時候，一般這個就是iPhone的橫向?qū)挾染鸵獙?header元素的高度設(shè)置為自適應(yīng)，將h1的字體大小修改為24像素并隱藏側(cè)邊欄首先我們設(shè)計webkit內(nèi)核瀏覽器下禁用文字大小調(diào)整，代碼如下htmlwebkittextsizeadjust 其次就是代碼的轉(zhuǎn)換了。

1Initializr Initializr是制作HTML5網(wǎng)站最好的入門輔助開發(fā)工具，你可以使用提供的特色模板快速生成網(wǎng)站，也可以自定義，Initializr會為你生成代碼簡潔的可定制的網(wǎng)頁模板2HTML5 visual cheat sheet HTML5 visual cheat sheet是一個非?？岬乃俨槭謨?，每個Web開發(fā)人員的必備神器，可以幫助大家快速超找一。

不一樣，需增加自適應(yīng)標(biāo)簽來保持一樣代碼如下ltmeta name=quotviewportquot content=quotwidth=devicewidth，initialscale=10， minimumscale=10， maximumscale=10， userscalable=noquot 解釋Viewport指用戶網(wǎng)頁的可視區(qū)域，content中的“width”指的是虛擬窗口寬度，上面代碼意為虛擬窗口頁面寬度。

3支持css3html5的高級瀏覽器可以利用CSS3 Media Queries讓網(wǎng)頁在不同分辨率下自動調(diào)節(jié)布局標(biāo)簽 4不支持css3html5的腦殘瀏覽器特別是lt=ie8系列則需要用js以及resize事件來控制html的布局標(biāo)簽寬度了 5寬度自適應(yīng)需要對每個顯示模塊進(jìn)行不同寬度的計算，在做html布局時需要大量的計算。

2在部分事件的處理上，移動端自然是偏向于觸屏的，另外包括移動端彈出的手機(jī)鍵盤該如何處理，這樣的問題在PC上肯定不會遇到，但在移動端，如果你沒有經(jīng)驗，處理起來是相當(dāng)麻煩的3布局上，移動端開發(fā)是要做到頁面布局自適應(yīng)的，而PC端頁面布局的比例會相對固定4在動畫效果處理上，PC端要考慮IE。

在文檔流中，DIV的高度默認(rèn)就是根據(jù)內(nèi)容的高度自適應(yīng)的如果是想適配不同設(shè)備的窗口大小，可以設(shè)置百分比或者通過position定位，然后設(shè)置top和bottom值再或者利用css3的flexbox布局，設(shè)置父級的display為flex，方向為縱的，然后設(shè)置其flex1。