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

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

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

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

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

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