基礎(chǔ)的網(wǎng)頁設(shè)計涵蓋了幾大重要環(huán)節(jié)：
前期的原型設(shè)計（工具：Axure，Mockplus）
UX設(shè)計(工具：Justinmind）
UI設(shè)計（工具：Sketch）
后期的前后端，HTMLCSS JS.

而做好自適應(yīng)網(wǎng)頁設(shè)計則需要遵循以下幾個步驟：

Step 1：meta 標簽
為了適應(yīng)屏幕，不少移動瀏覽器都會把HTML頁面置于較大視口寬度（一般會大于屏幕寬度），你可以使用viewport meta標簽來設(shè)定。以下viewport meta標簽告訴瀏覽器視口寬度等于設(shè)備屏幕寬度，且

不進行初始縮放：

Step 2. HTML結(jié)構(gòu)
在這個例子中，頁面布局包括 Header Content Sidebar和Footer. Header固定高度為180px Content寬600px Sidebar寬300px。

Step 3. Media Queries
CSS3 media query是自適應(yīng)網(wǎng)頁設(shè)計的關(guān)鍵，就像高級語言里的if條件語句，告訴瀏覽器根據(jù)不同的視口寬度（這里等于瀏覽器寬度）來渲染網(wǎng)頁。