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) { .. }