媒体查询使用详解

媒体查询使用详解一.媒体查询的历史:很多朋友认为媒体查询是CSS3新增,事实并非如此。媒体查询在CSS3之前早已存在,只是比较粗放一些,仅用来区分媒体的类型。看如下简单代码实例:<linkhref=”css/reset.css”rel=”stylesheet”type=”text/css”media=”screen”/><linkhref=”css/style.css”r…

一. 媒体查询的历史:

很多朋友认为媒体查询是CSS3新增,事实并非如此。媒体查询在CSS3之前早已存在,只是比较粗放一些,仅用来区分媒体的类型。

看如下简单代码实例:

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

上述代码分析如下:

  1. link元素的media属性用来规定上述CSS代码应用的媒体类型。
  2. screen表示对应CSS文件应用于显示设备。
  3. all表示对应CSS文件应用于所有媒体设备.
  4. print表示对应CSS文件应用于打印机。
  5. 即便当前媒体不符合要求,也会下载对应的CSS文件,只是不应用。

media属性也可以用于<style>元素,规定当前css代码应用的媒体类型,本文就不再演示。

CSS3之后,媒体查询功能得到了增强,不但可以查询媒体类型而且还可以查询媒体的相关属性
比如可以根据当前浏览器视口的尺寸的大小,来应用不同的CSS代码或者CSS文件。

二.媒体类型与媒体属性:

上文已经介绍,CSS2媒体查询只能区分媒体类型,CSS3得到了进一步加强,可以区分媒体的属性。

CSS3 中Media Queries的使用方法如下:

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

注意:使用Media Queries必须要使用@media开头,然后指定媒体类型(也可以称为设备类型),随后是指定媒体属性(也可以称之为设备属性)。

媒体属性的书写方式和样式的书写方式非常相似,主要分为两个部分,第一个部分指的是媒体属性,第二部分为媒体属性所指定的值,而且这两个部分之间使用冒号分隔。

下面罗列一下当前媒体查询常见的媒体类型与媒体属性:

主要的媒体类型有:

  1. screen:显示屏幕,比如电脑、手机或者pad屏幕。

  2. tty:电传打字机已经等宽字符网格类的设备。

  3. tv:电视等类型的设备。

  4. projection:投影仪等设备。

  5. handheld:一些手持设备。

  6. print:打印机。

  7. braille:盲人专用的一些设备。

  8. aural:语音合成器。

  9. all:表示适用于所有设备。

主要媒体属性有:

  1. 宽度属性:width | min-width | max-width。

  2. 高度属性:height | min-height | max-height。

  3. 设备宽度:device-width | min-device-width | max-device-width。

  4. 设备高度:device-height | min-device-height | max-device-height。

  5. 视口宽高比:aspect-ratio | min-aspect-ratio | max-aspect-ratio。

  6. 设备宽高比:device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio。

  7. 颜色属性:color | min-color | max-color。

  8. 颜色索引属性:color-index | min-color-index | max-color-index。

  9. 黑白属性:monochrome | min-monochrome | max-monochrome。

  10. 方向属性:orientation。

  11. 分辨率属性:resolution | min-resolution | max-resolution。

  12. 网格属性:grid。

但与CSS属性不同的是,媒体属性是通过min/max来表示大于等于或小于做为逻辑判断
而不是使用小于(<)和大于(>)这样的符号来判断。

三. 具体使用(两种场所)

媒体查询有两种应用场所,一种用在<link>与<style>元素之上一种是CSS代码内部

下面抛开媒体查询具体的语法不谈,首先演示一下使用场所。

1. <style>或者<link>标签上(这种主要针对媒体类型做区分)

<style media="screen and (max-width:1000px)" > div{ 
     color:red; } </style>

通过media属性规定媒体查询的具体内容,对于<link>标签也是同样的道理。
上述代码规定必须是显示器屏幕且视口尺寸小于等于1000px时候,能够将div字体颜色设置为红色。

2. 通过@media来使用

@media screen and (max-width:1000px){ 
   
  div{ 
   
    color:red;
  }
}

上述代码应用于CSS代码内部,功能与前面的完全一样,以@media作为媒体插件的语法标记。

具体语法分析如下:

当媒体查询为true时,就会应用对应的CSS样式。
无论是通过media还是@media规定媒体查询,语法都一致,且媒体属性一定要用小括号包裹。
媒体查询中有如果有逻辑操作符,在构建多条件查询的时候非常有用,属于语法的一部分。
但是考虑到比较重要,下面单独拿出来进行一下详细介绍。

四.逻辑操作符:

1. and操作符:

与JavaScript中的逻辑与操作符一个道理,比如两侧的条件都满足时,才会返回true。

代码片段如下:

@media screen and (min-width:800px) and (max-width:1200px) { 
   
  div{ 
   
    color:red;
  }
}

上述代码规定当前媒体必须满足如下条件,才会将div颜色设置为红色:

  1. 媒体类型必须是screen,也就是必须是显示器,比如电脑或者手机登。
  2. 视口的尺寸必须大于等于800像素,小于等于1200像素,比如调整浏览器视口到此尺寸。

注意:如果操作符不是not或者only,那么媒体类型是可选的,如果省略,那么默认值是screen。

所以上述代码可以修改如下:

@media (min-width:800px) and (max-width:1200px) { 
   
  div{ 
   
    color:red;
  }
}

上面效果和带screen一致。

2. not操作符:

此操作符用于对一个媒体查询语句进行取反操作,类似于JavaScript中的逻辑非运算符。

代码片段如下:

@media not screen and (min-width:800px) and (max-width:1200px) { 
   
  div{ 
   
    color:red;
  }
}

对上述代码分析如下:

  1. not是对整个媒体查询语句的一个取反,而不是对某一个媒体属性取反。
  2. 所以上述代码等同于@media not( screen and (min-width:800px) and (max-width:1200px))。

3.or操作符:

与JavaScript逻辑或操作符相同道理,只要两侧满足一条,那么整个媒体查询语句返回值为true。

代码片段如下:

@media (max-width:500px) , (orientation: landscape) { 
   
  div{ 
   
    color:red;
  }
}

特别说明:or操作符用逗号表示,否则会报错。

只要满足视口宽度小于等于500像素或者横屏的任意一条,那么div字体颜色就会被设置为红色。

4.only操作符:

此操作符可能未来就会被淘汰了,它是为了兼容低版本的浏览器而存在的。

随着软硬件的发展进步,它可能就逐步失去存在的意义,下面简单介绍一下。
在这里插入图片描述

五.媒体属性:

媒体属性比较多,下面只介绍一些比较常用的几种。

且大多数支持min-或者max-前缀,比如与width属性关联的属性还有min-width和max-width。

为了节省篇幅和时间,只以width属性为例子进行介绍,其他属性也是如此。

1. 最大宽度max-width

max-width是媒体属性中最常用的一个属性,其意思是指媒体类型小于或等于指定的宽度时,样式生效。如:

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

上面表示的是:当屏幕小于或等于480px时,页面中的广告区块(.ads)都将被隐藏。

2.最小宽度min-width

min-widthmax-width相反,指的是媒体类型大于或等于指定宽度时,样式生效。

3.多个媒体属性使用

Media Queries可以使用关键词and将多个媒体特性结合在一起。也就是说,一个Media Query中可以包含0到多个表达式,表达式又可以包含0到多个关键字,以及一种媒体类型。

当屏幕在600px~900px之间时,body的背景色渲染为“#f5f5f5”,如下所示:

@media screen and (min-width:600px) and (max-width:900px){ 
   
  body { 
   background-color:#f5f5f5;}
}
4.设备屏幕的输出宽度Device Width

在智能设备上,例如iPhone、iPad等,可以根据屏幕设备的尺寸来设置相应的样式(或者调用相应的样式文件)。同样的,对于屏幕设备同样可以使用“min/max”对应参数,如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

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


5. 内容显示区域宽高比:

aspect-ratio属性描述了内容输出区域的宽高比,属性值是以斜杠(/)分隔的整数。

代码片段如下:

@media (aspect-ratio: 1/2) { 
   
  div{ 
   
    color:red;
  }   
}
6. 设备宽高比:

和内容区域宽高比比较相似,属性值格式相同。

关于它们之间的区别,以电脑端为例子,显示器屏幕宽高比就是设备宽高比。

但是浏览器客户区的宽高比就是内容内容宽高比,是不是很容易理解了。

@media (device-aspect-ratio:16/9) { 
   
  div{ 
   
    color:red;
  }
}
7. 内容高度与内容宽度:

height与width描述了媒体内容输出区域的高度和宽度,比如浏览器客户区的高度和宽度。

@media (height:800px) { 
   
  div{ 
   
    color:red;
  }      
}

宽度是同样的道理,就不再举例子了。

8. 设备高度与设备宽度:

device-height与device-width描述了设备的高度和宽度,比如显示器屏幕的高度和宽度。

@media (device-width: 1200px) { 
   
  div{ 
   
    color:red;
  }     
}
9. 方向:

orientation规定了设备是处于横屏状态还是竖屏状态。

具有两个属性值,landscape表示横屏,portrait表示竖屏。

@media (orientation: portrait) { 
   
  div{ 
   
    color:red;
  }    
}

参考链接1 :https://www.jianshu.com/p/927790abdd80
参考链接2:http://www.softwhy.com/article-10120-1.html

今天的文章媒体查询使用详解分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/33773.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注