自適應(yīng)和響應(yīng)式的區(qū)別
- 自適應(yīng)布局（Adaptive）：解決了如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁(yè)，內(nèi)容不隨窗口大小而調(diào)整
- 響應(yīng)式布局（Responsive）：涵蓋了自適應(yīng)布局，即既適應(yīng)不同大小的設(shè)備，內(nèi)容也隨著窗口大小而自動(dòng)適配
實(shí)現(xiàn)
- 允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整
<meta name="viewport" content="width=device-width, initial-scale=1" />
- 少使用絕對(duì)寬度
px，使用% - 使用相對(duì)字體大小
em,rem - 引入
css文件- 選擇加載CSS，CSS3引入的
Media Query模塊它的意思就是，自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的CSS文件
- 選擇加載CSS，CSS3引入的
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="600.css" />
- 也可以在CSS文件中用
@import加載
@import url("600.css") screen and (max-device-width: 600px);
-
style中寫(xiě)入 - CSS的
@media規(guī)則，在同一個(gè)CSS文件中，根據(jù)不同的屏幕分辨率，選擇不同的CSS規(guī)則
@media screen and (min-width: 960px){}
@media screen and (min-width: 600px) and (max-width:960px) {}
更新中～
