IT博客汇 | 常用媒体查询 ( css media ) 条件

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

admin发表于 2016-11-08 05:10:31

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

@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/

Feed enhanced by Better Feed from Ozh