在編寫CSS時(shí)，不建議前端工程師把容器（不管是外層容器還是內(nèi)層）的寬度定死。為達(dá)到適配各種手持設(shè)備，建議前端工程師使用自適應(yīng)布局模式（支付寶 采用了自適應(yīng)布局模式），因?yàn)檫@樣做可以讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能夠正常的顯示，無需再次考慮設(shè)備的分辨率。

 

2. 狹窄布局

       在小屏幕上顯示大的web頁面仍舊需要一些信息視覺處理方法。目前一些瀏覽器采用狹窄布局作為默認(rèn)查看模式，因?yàn)檎麄€(gè)內(nèi)容的顯示窄且長，并且所有內(nèi)容都做了簡化以符合屏幕寬度。狹窄布局的主要好處就是文本容易閱讀，如果文本的寬度超過屏幕的寬度，用戶的閱讀就會(huì)很困難。

 

3. 原始布局

       由于狹窄布局存在很多可用性方面的問題，所以很多瀏覽器還提供原始布局頁面模式，讓用戶根據(jù)內(nèi)容來選擇不同的視圖模式，原始布局中，大圖片細(xì)節(jié)和表格的效果會(huì)更好，同時(shí)如果用戶知道PC上的網(wǎng)站的結(jié)構(gòu)，那么就很容易找到自己所需要的內(nèi)容。當(dāng)然原始布局并非什么問題都沒有。最糟糕的就是閱讀寬文本內(nèi)容，會(huì)很費(fèi)力。用戶每次都得向前向后拉動(dòng)滾動(dòng)條。另外由于頁面很大，所以需要滾動(dòng)的地方也越多。

 

4. 理想布局

       很明顯，小屏幕手機(jī)上的頁面瀏覽仍需要很多改進(jìn)和革新。如果想讓自己的網(wǎng)站在小屏幕上具有可讀性，可以遵守以下三個(gè)指導(dǎo)建議：避免那些一眼就能看出來的大物體；避免在圖片上使用小文本；頁面要輕化。

 

       適當(dāng)遵循以上四種手機(jī)網(wǎng)站布局的方法，再靈活使用自己所學(xué)的專業(yè)技巧，最后就能制作出一個(gè)完美的手機(jī)網(wǎng)站。