都1202年了，你还不会CSS3的媒体查询嘛？

Hello 大家好，我是彼岸繁華，一个想进大厂的大三学生，为了有一个完整的前端知识体系，现在我要从头开始学习、梳理、总结。

本系列文章在掘金首发，编写不易转载请获得允许

写在前面

媒体查询 （英文：Media queries ），这个特性非常的实用，尤其是需要根据设备的类型或者根据特定的特征和设备参数，来修改网站中的CSS样式。

例如视口宽度小于400px的时候，媒体查询的代码如下@media screen and (max-width: 400px)（后面会讲解），这个时候只有宽度小于400px，就会应用指定的样式。

媒体查询经常被用于以下目的：

• 有条件的通过@media或者@import用CSS装饰样式
• 用media=属性为

  彼岸繁華

  实现效果如下：

  

  在上面的代码中，只要当前屏幕的宽度小于800px就会满足媒体查询的条件，从而执行那组CSS规则。

  检测屏幕的朝向

  除了可以检测屏幕宽度，还可以用来检测屏幕的朝向，简单的说就是当前属于横屏还是竖屏。

  检测屏幕朝向使用的媒体特性表达式为orientation，该表达式具有两个值：

  • portrait：视口处于纵向，即高度大于等于宽度。
  • landscape：视口处于横向，即宽度大于高度。

  示例代码如下：

  
  
  
  
      
      
      
      
      
  
  
  
      
  彼岸繁華
  
  
  

  实现效果如下：

  

  标准的桌面视口都是属于横向的，但是对于竖放的手机或者平板电脑上来说，可能你的布局就没有这么好。

  这个时候对朝向的检测就可以帮助我们建立一个良好的布局（兼容横屏和竖屏）。

  检测是否可悬浮

  hover媒体特征可以用于检测用户当前能否在一个元素上悬浮，有些设备是不会出现悬浮效果的，例如触摸屏。

  hover具有两个值，分别是：

  • none：不可悬停
  • hover：可以悬停

  现在我们完成一个在可以悬停的设备的字体呈现红色，不可悬停的设备上字体呈现蓝色，代码如下：

  
  
  
  
      
      
      
      
      
  
  
  
      
  彼岸繁華
  
  
  

  实现效果如下：

  

  媒体查询中的逻辑操作符

  实现媒体查询中的“与”逻辑

  媒体查询中也是可以使用“与”逻辑的，它的实现是通过and关键字。

  现在我们有一个新的需求，当屏幕宽度至少为600px时，且设备为横放时字体变成蓝色，示例代码如下：

  
  
  
  
      
      
      
      
      
  
  
  
      
  彼岸繁華
  
  
  

  实现效果如下：

  

  实现媒体查询中的“或”逻辑

  媒体查询中使用“或”逻辑比较简单，就是使用一个逗号,来拆分多个查询。

  新需求，当屏幕宽度至少为600px时，或者设备为横放时字体变成蓝色，示例代码如下：

  
  
  
  
      
      
      
      
      
  
  
  
      
  彼岸繁華
  
  
  

  实现效果如下：

  实现媒体查询中的“非”逻辑

  媒体查询中的“非”逻辑使用的是not关键字，如果使用的逻辑非，表示你的CSS样式表除了不应用你写的规则，其他的都应用。

  新需求：当视口只要不是处于横向，字体就变成蓝色，示例代码如下：

  
  
  
  
      
      
      
      
      
  
  
  
      
  彼岸繁華
  
  
  

  实现效果如下：

  总结

  

  精彩文章

  【从头学前端】04-搞懂JavaScript中的基本数据类型

  【从头学前端】03-这次我就搞懂了JavaScript中的变量

  【从头学前端】02-JavaScript词法结构

  【从头学前端】01-什么是JavaScript