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%;
}
}
