有些網站不論你是用電腦、手機還是iPad去瀏覽都能無縫展示同一種但不同尺寸排列的風格。這一切，都要歸功于網站的自適應和響應式布局。想象一下，代碼能自動檢測設備屏幕寬度，然后加載適合的css是有多神奇。

說到自適應網站，設計稿看上去都是一模一樣的，但設計師們可是要費心思考慮屏幕變小時的變化方式。比如，網站內容有5個區(qū)塊和4個間距，那么當寬度縮小到900時，怎么調整才能讓網頁看起來更完美呢？這就是自適應布局的魔力所在。像站酷、Dribbble這些大網站，都采用了這種布局。

響應式網站則需要設計不同版本的設計稿，根據(jù)設備提供不同的CSS樣式。比如說，你的設備寬度是750px，網站就知道你是用手機訪問的，然后就會給你導入一份專屬于手機的樣式；如果是電腦的話，就導入電腦的樣式。這樣，無論你是用哪種設備瀏覽，都能得到最舒適的體驗。

再來說說手機適配，我們一般以iPhone為畫布標準，因為iPhone顯示清晰，要求高，用戶量也大。適配時，主要用750x1334px的尺寸，然后把網站導航改成手機APP常用的漢堡包+抽屜式導航，按鈕也要變大，方便手指點擊。字體方面則全部換成蘋方字體，字號設置變大，渲染方式也弄得銳利些，英文則用SF-UI。這樣，網站就變成了類APP的手機網頁，這樣才可以保證手機用戶體驗良好。如果是安卓手機，前端代碼會適度調整圖片和間距來適應屏幕。

至于iPad，它的尺寸和電腦屏幕差不多，所以瀏覽網頁基本都很舒適。但如果我們想讓iPad用戶用得更爽，可以調整文字大小、按鈕大小，還有交互形式，比如用抽屜式導航，讓導航不隨屏幕滾動。這樣一來，iPad用戶也能享受到超棒的瀏覽體驗。

無論是自適應還是響應式，都是為了讓網站更好地適應各種設備，提升用戶體驗。作為設計師和開發(fā)者，我們要用心去做，讓用戶無論用什么設備都能感受到我們的用心和熱情。