常用媒体查询 ( css media ) 条件

通过媒体查询为不同的设备和大小配置不同的样式。

@media 媒体类型 and (媒体特性){你的样式}

注意:使用Media Queries必须要使用“@media”开头,然后指定媒体类型(也可以称为设备类型),随后是指定媒体特性(也可以称之为设备特性)。
媒体特性的书写方式和样式的书写方式非常相似,主要分为两个部分,第一个部分指的是媒体特性,第二部分为媒体特性所指定的值,而且这两个部分之间使用冒号分隔。
与CSS属性不同的是,媒体特性是通过min/max来表示大于等于或小于做为逻辑判断。

1、最大宽度max-width

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

2、最小宽度min-width

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

3、多个媒体特性使用,使用关键词”and”将多个媒体特性结合在一起,每个条件包含在圆括号中。例:

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

4、设备屏幕的输出宽度Device Width

5、not关键词,表示对后面的表达式执行取反操作

6、only关键词,指定某种特定的媒体类型

7、使用逗号(,)被用来表示并列或者表示或

@media screen and (max-width:480px), screen and (min-width:960px){
  body {background-color:#f00;}
}

8、在Media Query中如果没有明确指定Media Type,那么其默认为all

9、非常喜欢Lyza的建议尽可能少。这绝对是符合我们的利益以及追求简单的页面格局。

常用媒体查询 ( css media ) 条件

/* media */
/* 横屏 */
@media screen and (orientation:landscape){
}
/* 竖屏 */
@media screen and (orientation:portrait){
}
/* 窗口宽度<960,设计宽度=768 */
@media screen and (max-width:959px){
}
/* 窗口宽度<768,设计宽度=640 */
@media screen and (max-width:767px){
}
/* 窗口宽度<640,设计宽度=480 */
@media screen and (max-width:639px){
}
/* 窗口宽度<480,设计宽度=320 */
@media screen and (max-width:479px){
}
/* windows UI 贴靠 */
@media screen and (-ms-view-state:snapped){
}
/* 打印 */
@media print{
}

参考:
http://nec.netease.com/framework/css-media.html
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

注:
使用媒体查询的优秀网站:http://mediaqueri.es/

css媒体查询学习(2)

媒体很多特性,比如宽度、颜色和网格,您可以在媒体查询中使用它们。
要设计响应式网站,只需要了解一些媒体特性:方向、宽度和高度。作为一个简单媒体特性,方向的值可以是 portrait 或 landscape。这些值适用于持有手机或平板电脑的用户,使您可以根据两个形状因素来优化内容。当高度大于长度时,则认为屏幕是纵向模式,当宽度大于高度时,则认为屏幕是横向模式。清单 8 显示了一个使用 orientation 媒体模式查询的示例。

清单 8. orientation 媒体查询

@media (orientation:portrait) { ... }

高度和宽度行为十分相似,都支持以 min- 和 max- 为前缀。清单 9 展示了一个有效的媒体查询。

清单 9. 高度和宽度媒体查询

@media (min-width:800px) and (min-height:400px) { ... }

如果没有 min- 或 max- 前缀,您还可以使用 width 和 height 媒体特性,如清单 10 所示。

清单 10. 不带 min- 和 max- 前缀

@media (width:800px) and (height:400px) { ... }

当屏幕正好是 800 像素宽、400 像素高时,可以使用清单 10 中的媒体查询。现实中,像这样的媒体查询可能过于具体而不太有用。检测精确维度是大多数网站访问者都不可能遇到的一个场景。通常情况下,响应式设计会使用范围来执行屏幕检测。

以下代码供参考:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

参考:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/#resources

css媒体查询学习(1)

从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型。清单 1 展示了一个示例。

清单 1. 使用媒体类型



在清单 1 中,media 属性定义了应该用于指定每种媒体类型的样式表:
screen 适用于计算机彩色屏幕。
print 适用于打印预览模式下查看的内容或者打印机打印的内容。

作为 CSS v3 规范的一部分,可以扩展媒体类型函数,并允许在样式表中使用更精确的显示规则。媒体查询是评估 True 或 False 的一种表达式。如果为 True,则继续使用样式表。如果为 False,则不能使用样式表。这种简单逻辑通过表达式变得更加强大,使您能够更灵活地对特定的设计场景使用自定义的显示规则。

媒体查询包含一个媒体类型,后跟一个或多个检查特定条件(如最小的屏幕宽度)的表达式。
样式表中的媒体查询看起来如清单 2 中的示例所示。

清单 2. 媒体查询规则

@media all and (min-width: 800px) { ... }

根据清单 2 中的标记,所有最小水平屏幕宽度为 800 像素的屏幕(屏幕和打印等)都应使用如下 CSS 规则。该规则在示例中省略号所在的地方。对于该媒体查询:
@media all 是媒体类型,也就是说,将此 CSS 应用于所有媒体类型。
(min-width:800px) 是包含媒体查询的表达式,如果浏览器的最小宽度为 800 像素,则会告诉浏览器只运用下列 CSS。

请注意,在清单 2 中,可以省略关键词 all 和 and。在将某个媒体查询应用于所有媒体类型时,会省略 all。后面的 and 也是可选的。使用简写语法重新编写媒体查询,如清单 3 所示。

清单 3. 简写语法

@media (min-width:800px) { ... }

媒体查询也可以包含复杂表达式。例如,如果您想要创建一个仅在最小宽度为 800 像素且最大宽度为 1200 像素时应用的样式,则需要按照清单 4 中的规则来做。

清单 4. 复杂表达式

@media (min-width:800px) and (max-width:1200px) { ... }

在您的表达式中,您可以根据自己的喜好使用任意数量的 and 条件。如果您想要增加其他条件来检查特定的屏幕方向,只需添加另一个 and 关键词,后跟 orientation 媒体查询,如清单 5 所示。

清单 5. and 条件

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

清单 5 中的媒体查询仅在宽度为 800 到 1200 像素且方向是纵向时才能激活。(通常,方向仅对能够轻易转换纵横模式的智能手机和平板电脑上是有意义的。)如果其中一个条件为 False,则无法应用媒体查询规则。
and 关键词的反义词是 or 关键词。和 and 一样,这些条件组合在一起会构成复杂表达式。如果其中有一个条件为 True,那么整个表达式或分离的两个条件都会为 True,如清单 6 所示。

清单 6. or 关键词

@media (min-width:800px) or (orientation:portrait) { ... }

如果宽度至少是 800 像素或方向是纵向的,则会应用该规则。
另一个保存在词库中的媒体查询关键词是 not。位于媒体查询的开始处,not 会忽略结果。换句话说,如果该查询本来在没有 not 关键词的情况下为 true,那么现在它将为 false。清单 7 展示一个示例。

清单 7. 使用 not

@media (not min-width:800px) { ... }

仅从英文意思上理解,清单 7 中代码的表示:当最小宽度不是 800 像素时,会应用下列 CSS 规则。这些示例只是将像素作为媒体查询中的测量单位,但是测量单位并不仅限于像素。您可以使用任何有效的 CSS 测量单位,比如厘米 (cm)、英寸 (in)、毫米 (mm) 等。

参考:http://www.ibm.com/developerworks/cn/web/wa-cssqueries/#resources

Media Queries 媒体查询学习

在CSS3中我们可以设置不同类型的媒体条件,并根据对应的条件,给相应符合条件的媒体调用相对应的样式表。你可以同时给PC机的大屏幕和移动设备设置不同的样式表。这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式。

简单的实例:


上面的media语句表示的是:当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。

这个简单的实例引出两个概念性的东西,一个就是媒体类型(Media Type)和 媒体特性(Media Query)

一、媒体类型(Media Type)
媒体类型(Media Type)在css2中是一个常见的属性,也是一个非常有用的属性,可以通过媒体类型对不同的设备指定不同的样式,在css2中我们常碰到的就是 all(全部),screen(屏幕)
,print(页面打印或打邱预览模式),其实在媒体类型不止这三种,w3c总共列出了10种媒体类型。

二、媒体特性(Media Query)
前面有简单的提到,Media Query是CSS3 对Media Type的增强版,其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则),常用的特性w3c共列出来13种。

Media Queries的具体使用方式:

1、最大宽度Max Width


上面表示的是:当屏幕小于或等于600px时,将采用small.css样式来渲染Web页面。

2、最小宽度Min Width


上面表示的是:当屏幕大于或等于900px时,将采用big.css样式来渲染Web页面。

3、多个Media Queries使用


Media Query可以结合多个媒体查询,换句话说,一个Media Query可以包含0到多个表达式,表达式又可以包含0到多个关键字,以及一种Media Type。正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。

4、设备屏幕的输出宽度Device Width


上面的代码指的是iphone.css样式适用于最大设备宽度为480px,比如说iPhone上的显示,这里的max-device-width所指的是设备的实际分辨率,也就是指可视面积分辨率。

5、iPhone4

上面的样式是专门针对iPhone4的移动设备写的。

6、iPad

 

在大数情况下,移动设备iPad上的Safari和在iPhone上的是相同的,只是他们不同之处是iPad声明了不同的方向,比如说上面的例子,在纵向(portrait)时采用portrait.css来渲染页面;在横向(landscape)时采用landscape.css来渲染页面。

7、android

/*240px的宽度*/

/*360px的宽度*/

/*480px的宽度*/

我们可以使用media query为android手机在不同分辨率提供特定样式,这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。

8、not关键字


not关键字是用来排除某种制定的媒体类型,换句话来说就是用于排除符合表达式的设备。

9、only关键字


only用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有:支持媒体特性(Media Queries)的设备,正常调用样式,此时就当only不存在;对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备,这样就会不读了样式,因为其先读only而不是screen;另外不支持Media Qqueries的浏览器,不论是否支持only,样式都不会被采用。

10、其他
在Media Query中如果没有明确指定Media Type,那么其默认为all,如:


另外还有使用逗号(,)被用来表示并列或者表示或,如下


上面代码中style.css样式被用在宽度小于或等于480px的手持设备上,或者被用于屏幕宽度大于或等于960px的设备上。

关于Media Query的使用这一节就介绍到此,最后总体规纳一下其功能,个人认为就是一句话:Media Queries能在不同的条件下使用不同的样式,使用页面达到不同的渲染效果。

摘录至:http://www.w3cplus.com/content/css3-media-queries