CSS3 Media Queries模板:max-width和min-width
日期：2013-11-13 浏览次数：21298 次
最早在《CSS3 Media Queries》一文中初探了CSS3的媒体类型和媒体特性的相关使用。简单的知道了使用这个能在各种不同的设备显示不一样的款式风格。
从这几篇文章中可以知道，在Responsiv的设计中，CSS3的Media是起着非常关键性的作用，也可以说没有CSS3 Media这个属性，Responsiv设计是玩不起来，也是玩不转的。大家都知道Responsiv是为各种不同的设备进行款式设计的，但有一个问题大家或许还处在模糊形状，这个CSS3 Media要如何设置各自的临界点？
那么今天我们就针对上面的问题，一同来探讨一下CSS3 Media Queries在各种不同设备（桌面，手机，笔记本，ios等）下的模板制造。那么Media Queries是如何任务的？那么有关于他的任务原理大家要是感兴味的话可以参考《CSS3 Media Queries》一文，里面曾经做过详细的引见，这里就不在进行过多的阐述。
CSS3 Media Queries模板
CSS3 Media Queries普通都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与款式表所设条件能否满足，如果满足就调用相应的款式。打个比方来说，如果你的Web页面在960px的显屏下显示，那么首先会通过CSS3 Media Queries进行查询，看看有没有设置这个条件款式，如果找到相应的，就会采用对应下的款式，其他的设备是一样的道理。下面具体看看“max-width”和“min-width”模板：
使用max-width
@media screen and (max-width: 600px) { //你的款式放在这里.... }
使用min-width
@media screen and (min-width: 900px) { //你的款式放在这里... }
max-width和min-width的混合使用
@media screen and (min-width: 600px) and (max-width: 900px) { //你的款式放在这里... }
同时CSS3 Media Queries还能查询设备的宽度“device-width”来判断款式的调用，这个次要用在iPhone,iPads设备上，比如像下面的使用：
iPhone和Smartphones上的运用
/* iPhone and Smartphones (portrait and landscape) */ @media screen and (min-device-width : 320px) and (max-device-width: 480px) { //你的款式放在这里... }
max-device-width指的是设备整个渲染区宽度（设备的实际宽度）
iPads上的运用
/* iPads (landscape) */ @media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { //你的款式放在这里... } /* iPads (portrait) */ @media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { //你的款式放在这里... }
针对挪动设备的运用，如果你想让款式任务得比较正常，需求在“<head>”添加“viewport”的meta标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
有关于这方面的引见大家可以看看这个blog上进行的的挪动端开发的相关总结。
调用独立的款式表
你可能希望在不同的设备下调用不同的款式文件，方便管理或者维护，那么你可以按下面的这种方式进行调用：
<link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device-width: 480px)" href="iphone.css" /> <link rel="stylesheet" media="screen and (min-device-width : 768px) and (max-device-width : 1024px)" href="ipad.css" />
CSS3 Media Queries在标准设备上的运用
下面我们一同来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些款式加到你的款式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的款式，让他适合你的设计需求：
1、1024px显屏
@media screen and (max-width : 1024px) { /* CSS Styles */ }
2、800px显屏
@media screen and (max-width : 800px) { /* CSS Styles */ }
3、640px显屏
@media screen and (max-width : 640px) { /* CSS Styles */ }
4、iPad横板显屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) { /* CSS Styles */ }
5、iPad竖板显屏
@media screen and (max-device-width: 768px) and (orientation: portrait) { /* CSS Styles */ }
iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* CSS Styles */ }
如今有关于这方面的运用也是相当的成熟，twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下：
// Landscape phones and do
