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

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

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

不進(jìn)行初始縮放：

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

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