（15）让这些“展现”有更好的扩展性——媒体查询 | CSS

原创：itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归做者全部，未经受权，请勿转载！

本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」
复制代码

1. 列举你了解的 HTML五、CSS3 新特性？
2. Canvas 和 SVG 有什么区别？
复制代码

🙋上方面试题“参考答案详解”，请点击此处查看获取方式！

---

前言： 实际上在很早以前，CSS 就支持媒体查询了。

例如，页面有些部分须要在打印的时候隐藏或者变大，这时候可使用 media 使某些 style 只在打印的时候生效。

@media print { /* 适用于印刷的样式 */ }
复制代码

而 CSS3 的 Media Queries 的到来，可让咱们针对不一样的设备场景使用不一样的 CSS。

1 经常使用的媒体类型

• all（全部），适用于全部设备。

• handheld（手持），用于手持设备。

• print（印刷），用于分页材料以及打印预览模式下在屏幕上的文档视图。

• projection（投影），用于投影演示文稿，例如投影仪。

• screen（屏幕），主要用于计算机屏幕。

在使用的时候能够在样式表直接书写 @media 指令 + 空格 + 媒体类型（多个用逗号隔开）：

@media print {
  body {font-size: 10pt;}
}
@media screen {
  body {font-size: 13px;}
}
@media screen, print {
  body {line-height: 1.2;}
}
复制代码

2 CSS3 里的媒体查询

CSS2 的媒体类型应用场景极为有限，CSS3 大大拓展了这一能力。

@media screen and (max-width: 990px) {
  .container {
    background: orange;
  }
}
/* 🚀通常来讲咱们写媒体查询就用这句话就好了，这是最经常使用的。 */
/* 意思就是：当咱们的浏览器屏幕（screen）的最大宽度为 990px 的时候， 如下的样式生效。若是屏幕不是 ≤990px，那么如下样式不生效。 */
复制代码

💡另外，

@media (min-width: 700px) and (orientation: landscape) { ... }

/* 🚀这个是指： 当它最小宽度是 700px，而且它的 orientation 是 landscape（横屏）。 orientation 这个属性表示你的浏览器是横屏（landscape）的仍是竖屏（portrait）的， 好比说在手机上，浏览器分为横屏和竖屏，那这样的话， 万一用户的浏览器看着是横屏的，那你可能给他一些提示。 好比你作了一些小游戏，这个小游戏不建议横屏去玩， 可是用户的浏览器本身能够去设置让它去旋转，那旋转完成以后，东西都放不下了。 因此你能够给他一个提示，若是检测到它是横屏，你可让这段 CSS 生效， 那这段 CSS 可能就是一段隐藏的话，说“你浏览器要垂直起来去玩咱们的游戏”。 那这样的话，咱们不须要使用任何 JS 就能够实现这个效果了。 */
复制代码

3 经常使用的 media 属性

width：浏览器宽度
height：浏览器高度
device-width：设备屏幕分辨率的宽度值
device-height：设备屏幕分辨率的高度值
orientation：浏览器窗口的方向纵向仍是横向，当窗口的高度值大于等于宽度时该特性值为 portrait，不然为 landscape。
aspect-ratio：比例值，浏览器的纵横比。
device-aspect-ratio：比例值，屏幕的纵横比。
color：设备使用多少位的颜色值，若是不是彩色设备，值为 0。
color-index：色彩表的色彩数
monochrome：单色帧缓冲器每一个像素的字节
resolution：分辨率值，设备分辨率值。
scan：电视机类型设备扫描方式，progressive 或 interlace。
grid：只能指定两个值 0 或 1，是否基于栅格的设备。
复制代码

4 如何引入 media

有两种经常使用的引入方式：

4.1 link 方法引入

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">
复制代码

4.2 @media 引入（这个最经常使用）

@media screen and (min-width: 600px) and (max-width: 800px) {
  选择器 {
    属性: 属性值;
  }
}
复制代码

❗️注意：通常咱们都是写完一个样式以后，再写它对应的媒体查询，并且要注意选择器的权重。

5 面试题实例

❓

答：
🔗源码及效果展现
HTML

<div id="header"></div>

<div id="content">
  <div id="left-content"></div>
  <div id="right-content"></div>
</div>
复制代码

CSS

body {
  margin: 0;
}

#header {
  width: 100%;
  height: 200px;
  background-color: #33ccff;
}

#left-content {
  float: left;
  width: 100px;
  height: 1000px;
  background-color: #ffcc99;
}

#right-content {
  margin-left: 100px;
  width: 100%;
  height: 1000px;
  background-color: #823384;
}


/* 🚀当屏幕 <= 700px 时，要及时覆盖上面的样式。 */
@media (max-width: 700px) {

  #header {
    width: 100%;
    height: 50px;
    background-color: #33ccff;
  }

  #left-content {
    width: 0;
  }

  #right-content {
    width: 100%;
    margin-left: 0;
    background-color: #823384;
  }
}
复制代码

---

后记： 本篇知识点很少，但每一个页面又基本上都会用，因此理解的基础上根据实际选择便可。

祝好，qdywxs ♥ you！