你可能不知道的Media queries

前言

说到媒体查询（Media queries），你是不是还停留在:

根据设备宽度提供不同的css，进行自适应布局

顾名思义，媒体查询指的是检测不同的设备媒体，所以它能查询的可不止是设备宽高，还包括更多的设备特性。下面列一些个人觉得比较有用，在项目中可能用得上的特性查询。

width（设备宽度）

这个是我们熟知的和最常用的一个查询条件。通过查询设备的宽度（准确的说是页面的可视化宽度，即window.innerWidth），来调整页面样式，适配不同分辨率的设备。

现在主要的用途就是拿来适配不同分辨率下的PC端页面，因为PC端的分辨率差异比较大，并且通过缩放浏览器窗口大小可以创造各种浏览器比例，所以为了更好的用户体验，可以用这个特性来设置不同的页面布局。

如掘金写的：

@media (max-width: 960px) {
    .sidebar[data-v-453a8097] {
        display:none
    }

    .main-area[data-v-453a8097] {
        width: 100%
    }

    .article-area[data-v-453a8097] {
        margin-bottom: 0
    }

    .open-in-app[data-v-453a8097] {
        bottom: 6rem
    }
}

当浏览器宽度小于960px的时候，他的侧边栏就会隐藏，内容主题占满浏览器。

可以设置多个断点来处理各种尺寸下任意元素的表现。

掘金：

@media (max-width: 375px) {
    .nav-item .search-form .search-input[data-v-1a3f6ed6] {
        width:10rem
    }
}

@media (max-width: 330px) {
    .nav-item.search[data-v-1a3f6ed6] {
        display:none
    }

    .nav-item.search .search-form .search-input[data-v-1a3f6ed6] {
        width: 5rem
    }
}

除了max-width之外，还有width min-width

height（设备高度）

同width，宽度变成高度而已。

orientation （设备旋转方向）

查询设备旋转方向。可以识别设备是处于横屏landscape还是竖屏portrait模式。

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}
 
@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

如果某些页面对设备的旋转模式有要求，就可以根据这个来判断，比如，当手机竖屏的时候，就显示一个提示信息“请旋转手机已获得更好的体验”，而不需要通过JS来设置。

resolution （设备像素比）

查询设备的设备像素比dpi。dpi越高，屏幕越清晰。

/* 指定的dpi */
@media (resolution: 150dpi) {
  p {
    color: red;
  }
}
 
/* 最小dpi */
@media (min-resolution: 72dpi) {
  p {
    text-decoration: underline;
  }
}
 
/* 最大dpi */
@media (max-resolution: 300dpi) {
  p {
    background: yellow;
  }
}

同一张背景图，你可以在不同DPI下设置不同的background-image，显示不同的清晰度图片，也就是设计稿里面的2x，3x图。

aspect-ratio （宽高比）

检测viewport的宽高比。以前手机的比列多数是4:3，现在多数是21:9,21:10，后面还有会折叠屏，可能接近1:1。

/* 最小宽高比 */
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /* blue */
  }
}
 
/* 最大宽高比 */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff;  /* cyan */
  }
}
 
/* 明确的宽高比 */
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /* red */
  }
}

根据不同的设备比例以及设备尺寸，调整页面布局，以展示更好的视觉效果。可能更适合用在webapp类的产品上。

prefers-color-scheme （配色模式）

探测用户设备的配色方案：（亮色/暗色）。即是否开启系统的暗黑模式，在移动端这个属性非常有用，很多移动端都已经支持暗黑模式，如果我们的页面能适配一个暗黑风格，那会给用户一个非常好的使用体验。

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}
 
@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

正常有不同主题的项目都是管理后台类的，操作方式也是用户手动选择，不是很灵活。通过媒体查询，可以直接跟随系统的颜色模式来进行切换，非常人性化。

虽然用户是被动切换的，但是一个开启了暗黑模式的用户怎么会嫌弃暗黑模式的应用呢？当然最好我们同时提供手动切换的功能。

prefers-reduced-motion （动画减弱）

检测用户的系统是否被开启了动画减弱功能。用户为了更好的性能，可能会在系统设置开启类似“关闭不必要动画”的功能，我们可以检测该配置，来去掉页面一些不必要的动画效果。

.animation {
  animation: vibrate 0.3s linear infinite both;
}
 
@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

可能很多人都不知道还有这个选项，它是这样设置的：

在 GTK/Gnome 中，可以通过 GNOME Tweaks （在“通用”或“外观”菜单中，取决于具体版本）的配置，设置 gtk-enable-animations 的值为 false。

可以在 GTK 3 的配置文件中的 [Settings] 模块下设置 gtk-enable-animations = false。

在 Windows 10 中：设置 > 轻松获取 > 显示 > 在 Windows 中显示动画。

在 Windows 7 中：控制面板 > 轻松获取 > ?是计算机更易于查看 > 关闭不必要动画。

在 MacOS 中：系统偏好 > 辅助使用 > 显示 > 减少运动。

在 iOS 上：设置 > 通用 > 辅助性 > 减少运动。

在 Android 9+ 上：设置 > 辅助性 > 移除动画。

如果你已经开启了这个功能，上面的代码，你将看不到动画。

这也是一个用户体验的提升。

总结

以上是一些比较实用和常用的媒体查询特性，更多的可以查看文档。

媒体查询如果配合JS其实能发现更多的可能性。

潜水很久，终于决定开始写东西，会持续把自己的一些经验写出来分享给大家，欢迎一起讨论研究。掘金新人，希望看完文章有启发的同学点赞一波。