自適應小螢幕裝置時，該如何佈局？

分享人：宜康

1.背景介紹

隨著科技的發達，使用移動裝置諸如手機平板等獲取資訊，社交的人越來越多。

如何在螢幕大小不同的物理裝置上獲得類似的使用體驗呢？ 

很多網站的做法是為不同大小的物理裝置提供不同的網頁。但是這樣做很麻煩，

需要維護多個版本，不夠方便。如果只寫一個版本，但是可以適應不同寬度的物理裝置，

那該多好。自適應網頁設計（ResponsiveWeb Design）應運而生。 

2.知識剖析

什麼是自適應網頁設計？ 頁面的設計與開發應當根據使用者行為以及裝置環境(系統平臺、螢幕尺寸、螢幕定向等)進行相應的響應和調整。簡單來說就是同一張網頁自動適應不同大小的螢幕，根據螢幕寬度，自動調整佈局（layout）。
 

  3.常見問題

問題1:如何實現自適應網頁設計？

問題2:viewport的作用。

4.解決問題

1.不使用絕對寬度，使用相對單位 具體來講CSS程式碼不能指定畫素寬度為xx px;只能指定百分比寬度 width: xx%;或者width:auto; 字型只能使用相對大 小（em,rem,vw,vh,vmin,vmax)等。

2.在網頁程式碼的頭部，加入一行meta標籤：meta name="viewport" content=content="width=device-width, initial-scale=1" 這段程式碼意思是說網頁寬度預設等於螢幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔螢幕面積的100%。

viewport是應對手機模式訪問網站,網頁對螢幕而做的一些設定。設定viewport後，移動頁面就可以進行拖動，放大縮小。

 5.拓展思考

除了自適應還有什麼其他方法實現對小螢幕裝置的適應

 6.參文獻考

 7.課外問題

1.能不能說下什麼情況下用vw比較好：

如果單純的用vw的話，就會有一個很麻煩的問題，因為螢幕過大時使用這個單位的元素會過於的大，所以配合響應式來使用是非常好的。

vw不可以設定max-width，我在做demo的時候，實驗了一下，min-width：40vw，頁面的寬度不受絲毫的影響。

3. 自適應螢幕縮小出現小幅度亂碼時該怎麼辦？

我按我個人的理解的話，我會適當的去新增響應式來變回原本自適應該有的頁面