Responsive设计——不同设备的分辨率设置

可以把这些样式加到你的样式文件中，或者单独创建一个名为“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) { .. }