有些網站不論你是用(yòng)電腦(nǎo)、手機還(hái)是iPad去浏覽都能無縫展示同一種但不同尺寸排列的(de)風格。這(zhè)一切，都要歸功于網站的(de)自适應和(hé)響應式布局。想象一下(xià)，代碼能自動檢測設備屏幕寬度，然後加載适合的(de)css是有多(duō)神奇。

說到自适應網站，設計稿看上去都是一模一樣的(de)，但設計師們可(kě)是要費心思考慮屏幕變小時(shí)的(de)變化(huà)方式。比如，網站内容有5個(gè)區(qū)塊和(hé)4個(gè)間距，那麽當寬度縮小到900時(shí)，怎麽調整才能讓網頁看起來(lái)更完美(měi)呢(ne)？這(zhè)就是自适應布局的(de)魔力所在。像站酷、Dribbble這(zhè)些大(dà)網站，都采用(yòng)了(le)這(zhè)種布局。

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

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

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

無論是自适應還(hái)是響應式，都是爲了(le)讓網站更好地适應各種設備，提升用(yòng)戶體驗。作爲設計師和(hé)開發者，我們要用(yòng)心去做(zuò)，讓用(yòng)戶無論用(yòng)什(shén)麽設備都能感受到我們的(de)用(yòng)心和(hé)熱(rè)情。