移動設備正在超越案頭設備，成為接入互聯網最常見的終端。囙此，網頁設計者必須面對一個問題：如何在不同大小的設備上呈現相同的網頁？自我調整網頁設計的出現解决了這個問題。本文將帶您瞭解一些自我調整web設計的基本知識和設計示例。
1、理論基礎：什麼是適應性網頁設計？
2011年，網頁設計師Aaron Gustafson在其著作《自適應網頁設計》中首次提出了自我調整網頁設計的概念。
Adaptivedesign（Adaptivedesign）：為不同類型的設備設定不同的網頁，在檢測到設備大小後調用相應的網頁。現時，AWD網頁主要關注這些決議（32048076096012001600）
與響應式網頁不同，自我調整設計使用基於中斷點的靜態佈局。一旦頁面被加載，它就不能再自動調整了。自我調整將自動檢測荧幕大小以加載適當的工作佈局。囙此，當您打開電腦上的瀏覽器流覽網頁時，網站會自動檢測並選擇案頭荧幕的最佳佈局。
2、實踐方法：如何做適應性網頁設計？
基本網頁設計包括幾個重要環節
文章的前端和後端，HTML，CSS，JS
網頁設計需要遵循以下步驟：
步驟1.meta標記
為了適應荧幕，許多移動瀏覽器將HTML頁面放在一個更大的視窗寬度（通常大於荧幕寬度）。您可以使用viewportmeta標記來設定它。以下viewportmeta標籤告訴瀏覽器，視口的寬度等於設備荧幕的寬度，而無需初始縮放：
Step2.html結構
在本例中，頁面佈局包括頁眉、內容、邊欄和頁腳.頁眉固定高度為180px，內容寬度為600px，邊欄寬度為300px。
步驟3.MediaQueries
CSS3媒體査詢是自我調整網頁設計的關鍵。就像高階語言中的if條件語句一樣，它告訴瀏覽器根據視圖的不同寬度（這裡等於瀏覽器寬度）呈現網頁。
3、自我調整網頁設計實例
現時，許多網站已經在PC和移動終端上採用了適應性設計。當我們在不同的設備上流覽網頁時，我們會有一個很好的適應網頁設計的體驗。例如，亞馬遜，今日美國，蘋果，andAbout.com網站然而，在移動網站上顯示的自我調整設計的佈局可能與案頭版本的佈局不同。囙此，在進行適應性網頁設計時，設計師需要做更多的工作來滿足至少六個常見的佈局要求。
|
