css标准版格式

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 sc max-device-width指的是设备整个渲染区宽度（设备的实际宽度）

iPads上的运用

/* iPads (landscape) */ @media screen and

(min-device-width : 768px) and (max-device-width : 1024px) and (orientation :

landscape) { //你的样式放在这里... } /* iPads 针对移动设备的运用，如果你想让样式工作得比较正常，需要在“”添加“viewport”

的meta标签：

有关于这方面的介绍大家可以看看这个blog上进行的的移动端开发的相关总结。