經過CSS3 實現響應式Web設計的三個步驟

如何經過CSS3 實現響應式Web設計：

分爲三個步驟：

（1）容許網頁寬度自動調整。首先在頁面頭部中，咱們須要加入這樣一行：<meta name="viewport" content="width=device-width, initial-scale=1" />  viewport是網頁默認的寬度和高度，網頁的寬度默認就等於本身屏幕寬度（width=device-width），而且原始縮放比例（initial-scale=1）爲1.0，也就是網頁初始大小佔屏幕面積的100%。

（2）流式佈局。不使用絕對寬度佈局和字體大小，也就是css中代碼中，定義寬和高的時候不能使用px（width：px）只能使用百分比（width：%）或者（width：auto）定義高寬。定義字體大小也使用相對單位（em），不使用絕對單位（px）。

（3）媒體查詢（media query）@media only screen and （max-width：px）max-width就是當屏幕小於等於多少的時候執行而（min-widt）就是當屏幕大於等於多少的時候執行。