Responsive設計——不同設備的分辨率設置
下面我們一起來看看CSS3 Meida Queries在標準設備上的運用，大家可以把這些樣式加到你的樣式文档中，或者單獨創建一個名爲“responsive.css”文档，並在相應的條件中寫上你的樣式，讓他適合你的設計需求：
1.1024px顯屏
@media screen and (max-width : 1024px) {
/* 樣式寫在這裡 */
}2.800px顯屏
@media screen and (max-width : 800px) {
/* 樣式寫在這裡 */
}3.640px顯屏
@media screen and (max-width : 640px) {
/* 樣式寫在這*/
}4.iPad橫板顯屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/* 樣式寫在這 */
}5.iPad竪板顯屏
@media screen and (max-device-width: 768px) and (orientation: portrait) {
/* 樣式寫在這 */
}6.iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {
/* 樣式寫在這 */
}現在有關於這方面的運用也是相當的成熟，twitter的Bootstrap第二版本中就加上了這方面的運用。
大家可以對比一下：
@media (max-width: 480px) { ... }
@media (max-width: 768px) { ... }
@media (min-width: 768px) and (max-width: 980px) { ... }
@media (min-width: 1200px) { .. }在寬屏下是3列布局，當屏幕在小於480時是單列顯示。
index.html代碼：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>columns</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrapper"> <div class="left"></div> <div class="content"></div> </div> </body> </html>
style.css代碼:
.wrapper{
width:100%;
background:green;
max-width:980px;
overflow:hidden;
margin-left:auto;
margin-right:auto;
}
.left{
float:left;
width:20%;
background:orange;
min-height:100px;
}
.content{
float:right;
width:78%;
background:blue;
min-height:100px;
}
@media(max-width:480px){
.wrapper{
min-width:320px;
width:98%;
margin-left:1%;
margin-right:1%;
}
.left{
float:none;
width:100%;
}
.content{
float:none;
width:100%;
}
}
