下面我们一起来看看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- 1024px) and (orientation: landscape) { /* 样式写在这 */ }
5.iPad竖板显屏
@media screen and (max-device- 768px) and (orientation: portrait) { /* 样式写在这 */ }
6.iPhone 和 Smartphones
@media screen and (min-device- 320px) and (min-device- 480px) { /* 样式写在这 */ }
现在有关于这方面的运用也是相当的成熟,twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下:
@media (max- 480px) { ... }
@media (max- 768px) { ... }
@media (min- 768px) and (max- 980px) { ... }
@media (min- 1200px) { .. }