@media screen解決移動web開發的多解析度問題
在css2中就有media type屬性，用於判斷媒體型別。而在css3中新增了 media query屬性用於增強media type屬性。media query屬性可以看做是是media type屬性的增強版，使media type可以進行條件判斷輸出對應的css。screen僅是media中的一種
常用裝置的尺寸：
顯示器1280 x 800
ipad 1024 x 768
Android 800 x 480
iPhone 640 x 960
當只使用min_width或則max_width時；我們用min-width時，小的放上面大的在下面，同理如果是用max-width那麼就是大的在上面，小的在下面，順序不能混淆。例如
@media (min-width: 768px){ //>=768的裝置 }
@media (min-width: 992px){ //>=992的裝置 }
@media (min-width: 1200){ //>=1200的裝置 }
當然在很多情況下都是混合使用；例如
@media screen and (min-width: 960px) and (max-width: 1199px) { #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px} }
還有一種方法是我不常使用的：
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 600px) and (max-width: 800px)">
意思是當螢幕的寬度大於600小於800時，應用style.css檔案設定樣式
注意其與device-aspect-ratio的區別
寫了一段程式碼，可能有不合理之處，但是效果還是有的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>響應式佈局</title>
</head>
<meta name="viewport" content="width=device-width;initial-scale=1.0">
<style>
*{
padding:0;
margin:0;
}
@media screen and (min-width: 960px){
#header{
width:100%;
margin:0 auto;
height:60px;
background:#eee;
}
#sousuo{
margin:0 auto;
width:420px;
height:40px;
}
#sousuo input{
width:73%;
height:90%;
float:left;
}
#sousuo button{
float:right;
height:95%;
width:26%;
}
#zero{
width:100%;
height:200px;
border:1px solid blue;
}
#one{
width:30%;
height:100%;
border:1px solid red;
float:left;
}
#two{
width:40%;
height:100%;
border:1px solid #ccc;
float:left;
margin-left:20px;
}
#three{
width:26%;
height:100%;
border:1px solid yellow;
float:right;
}
}
@media screen and (min-width:600px) and (max-width:960px){
#header{
width:100%;
height:60px;
background:#ccc;
}
}
@media screen and (max-width:360px){
#header{
width:100%;
height:60px;
background:pink;
}
#sousuo{
width:320px;
height:50px;
/*border:1px solid blue;*/
}
#sousuo input{
width:200px;
height:50px;
}
#sousuo button{
width:100px;
height: 60px;
}
#zero{
width:100%;
height:1000px;
background:#c8c8c8;
margin-top:20px;
position:absolute;
}
#zero #one{
width:90%;
height:300px;
background:#506478;
position:relative;
margin:0 auto;
margin-top:20px;
}
#zero #two{
position:relative;
width:90%;
height:300px;
background:#506478;
margin:0 auto;
margin-top:20px;
}
#zero #three{
position:relative;
width:90%;
height:300px;
background:#506478;
margin:0 auto;
margin-top:20px;
}
}
</style>
<body>
<div id="header">這裡是頭部</div>
<div id="sousuo">
<input type="text">
<button>百度一下</button>
</div>
<div id="zero">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
</body>
</html>