工学1号馆

上一篇介绍了 viewport，在这一篇会介绍 Media Query 媒体查询

什么是 Media Query 媒体查询？

在如今的生活中，网页可能会被在任何电子设备中访问（电脑，手机，平板，电视，手表，等等）。

Media Query 媒体查询可以让网页能够根据设备属性的不同（例如，屏幕宽度，高度，方向，高宽比，等等）而应用不同的 CSS 样式。

这样我们就能让网页能够在各种设备中都表现出我们想要的样式。

基本用法

一个媒体查询包含一个可选的媒体类型和零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为 true 或 false。如果显示网页的设备符合媒体类型，并且表达式结果都为 true。那么这个媒体查询所对应的样式就会被引入HTML文档。

1. 引用media query

在这里我介绍两种方式去添加 media query：<link>链接引入，@media代码嵌入

<link>链接引入

在以往我们都是这样通过 <link> 标签直接引入 CSS样式。

<link rel="stylesheet" href="style.css">

现在通过向<link>元素中添加 media 属性，我们就可以让 CSS样式变得有选择的去引入。

<link rel="stylesheet" media="screen and (min-width:600px)" href="over600.css">

上面代码的意思就是，如果在电脑/手机/平板屏幕上显示网页，并且 viewport 的宽度大于等于 600px，那么样式表“over600.css”就会被引入。

在日常开发中，基本上我们只会用到 “screen” 这个媒体类型。

screen：用于电脑屏幕，平板电脑，智能手机等。

@media代码嵌入

你也可以直接在 CSS样式表中通过 @media 嵌入 media query 代码。

@media screen and (min-width: 600px) {
    body {background-color: yellow;}
}

上面代码意思是，如果在电脑/手机/平板屏幕上显示网页，并且 viewport 的宽度大于等于 600px，那么 body元素的背景色就会被设置成黄色。

使用 <link>链接引入会让<link>标签变多，HTTP 请求变多。

使用 @media代码嵌入会让 CSS样式表变大。

具体选择哪个，根据情况不同自己选择。在以后讲到性能的时候，我们再分析这些。现在你就随自己喜欢选择吧。

2. 断点 breaking point

在上面的代码中min-width: 600px，当屏幕视口宽度大于 600px 的时候，样式生效。那么 600px 就是一个断点。

上图中随着浏览器视口宽度的变化，页面布局发生变化。

可见断点就是页面布局发生变化时的可见区域视口宽度的值。

我们通过min-width 和 max-width 来定义。

min-width ：定义输出设备中的页面最小可见区域宽度。
max-width ：定义输出设备中的页面最大可见区域宽度。

3. 在哪里加断点？

其实这张图就很清楚啦，根据显示设备的不同，我们在合适的位置打上断点。

@media (max-width: 600px) { … }：手机端
@media (min-width: 600px) and (max-width: 900px) { … }：平板电脑
@media (min-width: 900px) and (max-width: 1200px) { … }：中等屏幕台式电脑
@media (min-width: 1200px) { … }：大屏幕台式电脑

（当然这些数值，还是要看具体情况，具体设置的，并不绝对。）

实际操作吧！

最终结果：

在移动端，我们要让侧边栏和主栏垂直排在同一列。

我们还要导航栏nav 和标题h1 在 <header> 垂直排在同一列。

首先我们 CSS样式里，写入

@media screen and (max-width: 600px) {}
/* 当视口宽度小于600px（移动端）应用上面样式 */

@media screen and (min-width: 600px) {}
/* 当视口宽度大于600px（桌面端）应用上面样式 */

之后，把之前的主栏和侧边栏的百分比布局样式

.index-main { 
  width: 75%;     
}

.index-aside {
  width: 25%;    
  padding-left: 20px;
}

挪到@media screen and (min-width: 600px) {}

@media screen and (min-width: 600px) {
	.index-main { 
		width: 75%;     
	}

	.index-aside {
	    width: 25%;    
	    padding-left: 20px;
        }
}

也就是说，只有当视口宽度大于600px 的时候，才会按照上面样式排列。

之后，在@media screen and (max-width: 600px)中写入代码

@media screen and (max-width: 600px) {
    .index-header {
    	flex-direction: column;
    }
    /* 标题 和 导航 垂直排列 */

    .index-container {
	flex-direction: column;
    /* 主栏 和 侧边栏 垂直排列 */
    }

    .index-main {
        width: 100%;
    /* 垂直排列的时候占父元素100%宽度 */
    } 

    .index-aside {
	width: 100%;
    /* 垂直排列的时候占父元素100%宽度 */
    }
}

当时我们发现导航栏 nav 和标题没对齐。

审查元素后发现 <nav> 中的 <ul> 前面有个 padding。下面把它去掉。

在@media screen and (max-width: 600px)添加：

.index-header-nav ul {
    padding: 0;
}

之后我们就完成啦!

响应式设计（2）

什么是 Media Query 媒体查询 ？

基本用法

实际操作吧！

Comments

什么是 Media Query 媒体查询？