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

最新推荐文章于 2024-09-05 23:08:05 发布

转载最新推荐文章于 2024-09-05 23:08:05 发布 · 79 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gulan/p/5849622.html

本文介绍了如何使用CSS3 Media Queries为不同屏幕尺寸定制样式。包括针对1024px、800px、640px等分辨率及iPad、iPhone等设备的横竖屏展示效果。还对比了Twitter Bootstrap 2的响应式设计实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面我们一起来看看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) { .. }

转载于:https://www.cnblogs.com/gulan/p/5849622.html