定義: 使一個(gè)網(wǎng)站能兼容多個(gè)終端—而不是為每個(gè)終端做一個(gè)特定的版本孝鹊。這個(gè)概念是為了解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的适瓦。
為什么需要: 響應(yīng)式布局可以為不同的終端的用戶(hù)提供更加舒適的頁(yè)面和更好的用戶(hù)體驗(yàn)。隨著目前大屏幕移動(dòng)設(shè)備的普及占调，可以用“大勢(shì)所趨”來(lái)形容庶香。
媒體查詢(xún):
1.通過(guò)不同的媒介類(lèi)型和條件定義樣式表規(guī)則桐玻。
2.媒介查詢(xún)讓CSS可以更精確作用域不同的媒介類(lèi)型和同一媒介的不同條件迟螺。
3.媒介查詢(xún)的大部分媒介特性都接收min和max用于表達(dá)：大于或等于和小于或等于
4.語(yǔ)法
4.1在link中使用@media,如下
<!DOCTYPE html>
<html>
? ?<head>
? ? ? ?<meta charset="utf-8">
? ? ? ?<link rel="stylesheet" href="css/link1.css" media="screen and (max-width:500px)">
? ? ? ?<link rel="stylesheet" href="css/link2.css" media="screen and (max-width:1000px) and (min-width:500px)">
? ? ? ?<link rel="stylesheet" href="css/link3.css" media="screen and (min-width:1000px)">
? ? ? ?<title></title>
? </head>
? <body>
? ? <div class="main"></div>
? <body>
<html>
意思是
當(dāng)main這個(gè)div的寬度在500px以下時(shí)調(diào)用css中的link1.css?
當(dāng)main這個(gè)div的寬度在500px到1000px之間時(shí)調(diào)用css中的link2.css
當(dāng)main這個(gè)div的寬度在1000px以上時(shí)調(diào)用css中的link3.css
4.2在樣式表中內(nèi)嵌@media 如下圖
