標籤：
手機瀏覽器會將一個標準網頁縮小至與裝置可視地區（標準技術術語叫做“視口”）恰好匹配。然後使用者在自己感興趣的內容地區上放大瀏覽
大多數情況下，根據視口大小為使用者提供與之匹配的視覺效果還是優先選擇
用廠商首碼時，遵循樣式表的層疊特性，將無首碼的代碼放在最後，這樣如果該特性可用，則會覆蓋之前的聲明
使用CSS的@import指令在當前樣式表中按條件引入其他樣式表，eg：
@import url("phone.css") screen and (max-width:360px);
使用CSS的@import方式會增加HTTP請求（這會影響載入速度）
媒體查詢能檢測的一部分特性
建立媒體查詢時，最常用的是裝置的視口寬度(width)和螢幕寬度(device-width)。
width：視口寬度
height：視口高度
device-width：渲染表面的寬度（對我們來說，就是裝置螢幕的寬度）
device-height：同上（裝置螢幕的高度）
orientation：檢查裝置處於橫向還是縱向
aspect-ratio：基於視口寬度和高度的寬高比。一個16:9比例的顯示屏可以這樣定義aspect-ratio:16/9
device-aspect-ratio：基於裝置渲染平面寬度和高度的寬高比
color：每種顏色的位元。例如min-color:16會檢測裝置是否擁有16位顏色
resolution：用來檢測螢幕或印表機的解析度，如min-resolution:300dpi。還可以接受每厘米像素點數的度量值，如min-resolution:118dpcm
上述所有特性中，都可使用min和max首碼來建立一個查詢範圍
CSS層疊樣式表，所謂層疊，就是指樣式表中後面的樣式會覆蓋前面相同的樣式（除非前面的樣式具有更高的針對性）。可以在樣式表的開頭設定基本樣式，以便適應所有設計，然後使用媒體查詢來進一步重寫相應的部分
iOS上的Safari瀏覽器預設是在980像素寬的畫布上渲染頁面，然後將畫布縮小到與視口大小匹配
阻止行動瀏覽器自動調整頁面大小
viewport meta元素覆蓋預設的畫面縮放設定
<meta name="viewport" content="initial-scale=2.0,width=device-width"/>
content="initial-scale=2.0"的意思是將頁面放大兩倍，width=device-width告訴瀏覽器頁面的寬度應該等於裝置寬度。
<meta>標籤還可以控制頁面可縮放的範圍，下面代碼允許使用者將頁面最多放大至裝置寬度的3倍，最下亞索至裝置寬度的一半
<meta name="viewport" content="width=device-width,maximum-scale=3,minimum-scale=0.5"/>
禁止使用者縮放：
<meta name="viewport" content="initial-scale=1.0,user-scalable=no"/>
user-scalable=no即是禁止縮放
將縮放比例設定為1.0，表示瀏覽器將按照其視口的實際大小來渲染頁面。將寬度設定為裝置寬度，意味著支援該特性的瀏覽器都將會按照裝置寬度的實際大小來渲染頁面
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
原來代碼結構片段：
<div id="sidebar">
<p>here is the sidebar</p>
</div>
<div id="content">
<p>here is the content</p>
</div>
互換位置後：
<div id="content">
<p>here is the content</p>
</div>
<div id="sidebar">
<p>here is the sidebar</p>
</div>
雖然我們互換了標籤位置，但頁面在大視口中的顯示效果沒有變化，因為側邊欄和內容區分別使用了float:left和float:right屬性。但是在iPad上，則變成了首先顯示內容區，下面才是側邊欄
流動布局，保證頁面在媒體查詢斷點之間的顯示效果平滑流暢
<body><div id="wrapper"> <div id="header"> <div id="navigation"> <ul> <li><a href="#">navigation1</a></li> </ul><a href="#">navigation2</a></li> </ul> </div> </div> <div id="content"> <p>that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?We’re here to put things right.that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?We’re here to put things right.that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?We’re here to put things right.that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?We’re here to put things right.that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?We’re here to put things right.that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?We’re here to put things right.</p> </div> <div id="sidebar"> <p>here is the sidebar</p> </div> <div id="footer"> <p>Here is the footer</p> </div></div></body>
*{ padding:0; margin:0;}#wrapper{ margin-right:auto; margin-left:auto; width:960px; border:1px solid red;}#header{ margin-right:10px; margin-left:10px; width:940px; background-image:url(images/buntingFW.png);}#navigation ul li{ display:inline-block;}#sidebar{ margin-right:10px; margin-left:10px; float:left; background-color:#fe9c00; width:220px;}#content{ margin-right:10px; margin-left:10px; float:right; width:700px; background-color:#dedede;}#footer{ margin-right:10px; margin-left:10px; clear:both; background-image:url(images/buntingFWinvert.png); width:940px;}@media screen and (max-width:768px){ #wrapper{ width:768px; } #header,#footer,#navigation{ width:748px; } #content,#sidebar{ margin-top:20px; padding-right:10px; padding-left:10px; width:728px; }}
響應式布局--媒體查詢
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
