CSS3 Media Queries模板:max-width和min-width

　最早在《CSS3MediaQueries》一文中初探了CSS3的媒体类型和媒体特性的相关应用。简单的知道了使用这个能在各种不同的设备显示不一样的样式风格。
　　
　从这几篇文章中可以知道，在Responsiv的设计中，CSS3的Media是起着非常关键性的作用，也可以说没有CSS3Media这个属性，Responsiv设计是玩不起来，也是玩不转的。大家都知道Responsiv是为各种不同的设备进行样式设计的，但有一个问题大家或许还处在模糊状态，这个CSS3Media要如何设置各自的临界点？
　　
　　那么今天我们就针对上面的问题，一起来探讨一下 CSS3MediaQueries在各种不同设备（桌面，手机，笔记本，ios等）下的模板制作。那么MediaQueries是如何工作的？那么有关于他的工作原理大家要是感兴趣的话可以参考《CSS3MediaQueries》一文，里面已经做过详细的介绍，这里就不在进行过多的阐述。
　　
　　CSS3MediaQueries模板
　　
　CSS3MediaQueries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足，如果满足就调用相应的样式。打个比方来说，如果你的Web页面在960px的显屏下显示，那么首先会通过CSS3MediaQueries进行查询，看看有没有设置这个条件样式，如果找到相应的，就会采用对应下的样式，其他的设备是一样的道理。下面具体看看“max-width”和“min- width”模板：
　　
　　使用max-width
　　
　　  @mediascreenand(max-width:600px){   //你的样式放在这里....  } 使用min-width
　　
　　  @mediascreenand(min-width:900px){   //你的样式放在这里...  } max-width和min-width的混合使用
　　
　  @mediascreenand(min-width:600px)and(max-width:900px){   //你的样式放在这里...  } 同时CSS3MediaQueries还能查询设备的宽度“device-width”来判断样式的调用，这个主要用在 iPhone,iPads设备上，比如像下面的应用：
　　
　　iPhone和Smartphones上的运用
　　
　  /*iPhoneandSmartphones(portraitandlandscape)*/  @mediascreenand(min- device-width:320px)and(max-device-width:480px){   //你的样式放在这里...  } max- device-width指的是设备整个渲染区宽度（设备的实际宽度）
　　
　　iPads上的运用
　　
　  /*iPads(landscape)*/  @mediascreenand(min-device-width:768px)and(max- device-width:1024px)and(orientation:landscape){   //你的样式放在这里...  }  /*iPads(portrait)*/  @mediascreenand(min-device- width:768px)and(max-device-width:1024px)and(orientation:portrait){   //你的样式放在这里...  } 针对移动设备的运用，如果你想让样式工作得比较正常，需要在“<head>”添加“viewport”的 meta标签：
　　
　　  <metaname="viewport"content="width=device-width,initial-scale=1.0"/> 有关于这方面的介绍大家可以看看这个blog上进行的的移动端开发的相关总结。
　　
　　调用独立的样式表
　　
　　你可能希望在不同的设备下调用不同的样式文件，方便管理或者维护，那么你可以按下面的这种方式进行调用：
　　
　  <linkrel="stylesheet"media="screenand(min-device- width:320px)and(max-device-width:480px)"href="iphone.css"/>  < linkrel="stylesheet"media="screenand(min-device-width:768px)and(max- device-width:1024px)"href="ipad.css"/> CSS3MediaQueries在标准设备上的运用
　　
　　下面我们一起来看看CSS3MeidaQueries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求：
　　
　　1、1024px显屏
　　
　　  @mediascreenand(max-width:1024px){   /*CSSStyles*/  } 2、800px显屏
　　
　　  @mediascreenand(max-width:800px){   /*CSSStyles*/  } 3、640px显屏
　　
　　  @mediascreenand(max-width:640px){   /*CSSStyles*/  } 4、iPad横板显屏
　　
　　  @mediascreenand(max-device-width:1024px)and(orientation:landscape){   /*CSSStyles*/  } 5、iPad竖板显屏
　　
　　  @mediascreenand(max-device-width:768px)and(orientation:portrait){   /*CSSStyles*/  } iPhone和Smartphones
　　
　  @mediascreenand(min-device-width:320px)and(min-device-width:480px) {   /*CSSStyles*/  } 现在有关于这方面的运用也是相当的成熟，twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下：
　　
　　 //Landscapephonesanddown @media(max-width:480px) {...}  //Landscapephonetoportraittablet @media(max-width:768px) {...}  //Portraittablettolandscapeanddesktop @media(min- width:768px)and(max-width:980px){...}  //Largedesktop @media(min- width:1200px){..} 在bootstrap中的responsive.css采用的是网格布局，大家可以到官网查看或下载其源码进行学习。另外960gs为大家提供了一个Adapt.js也很方便的帮大家实现上述效果。感兴趣的同学可以去了解了解。
　　
　　下面给大家提供几个这方面的案例，以供大家参考：
　　
　　《CSS3MediaQueries案例——Hicksdesign》
　　
　　《CSS3MediaQueries案例——TeeGallery》
　　
　　《CSS3MediaQueries案例——AListApart》
　　
　　更新CSS3MediaQueries模板查询
　　
　　1、Smartphones(portraitandlandscape)
　　
　　@mediaonlyscreenand(min-device-width:320px)and(max-device-width:480px){ /*Styles*/}2、Smartphones(landscape)
　　
　　@mediaonlyscreenand(min-width:321px){ /*Styles*/}3、Smartphones(portrait)
　　
　　@mediaonlyscreenand(max-width:320px){ /*Styles*/}4、iPads(portraitandlandscape)
　　
　　@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px){ /*Styles*/}5、iPads(landscape)
　　
　@mediaonlyscreenand(min-device-width:768px)and(max-device- width:1024px)and(orientation:landscape){ /*Styles*/}6、iPads(portrait)
　　
　　@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px)and(orientation:portrait){ /*Styles*/}7、iPhone4
　　
　　@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(min-device-pixel-ratio:1.5){ /*Styles*/}8、640px显屏
　　
　　@mediascreenand(max-width:640px){ /*CSSStyles*/}9、800px显屏
　　
　　@mediascreenand(max-width:800px){ /*CSSStyles*/}10、1024显屏
　　
　　@mediascreenand(max-width:1024px){ /*CSSStyles*/}11、Desktopsandlaptops
　　
　　@mediaonlyscreenand(min-width:1224px){ /*Styles*/}12、Largescreens
　　
　@mediaonlyscreenand(min-width:1824px){ /*Styles*/}那么有关于CSS3MediaQueries 模板的相关介绍就说到这里了，最后希望大家喜欢。如果你觉得这篇文章对你有所帮助或者比较有实用价值，您可以把他推荐给您的朋友，如果你有更好的分享可以在下面的评论中直接与我们一起分享您的经验。
　　
　　2012年10月09日更新
　　
　　@mediaonlyscreenand(min-width:320px){/*Smallscreen,non-retina*/}@media

最新快审展示

PicACG-哔咔漫画官网

tp钱包官网下载

企业邮箱购买

tp钱包官网下载

腾讯企业邮箱升级优惠

杭州阿里云邮箱

腾讯企业邮箱续费优惠

QQ宁波企业邮箱

163外贸企业邮箱

股票指标公式源码大全

站长资讯

推荐站点