响应式设计
你在笔记本电脑上构建了一个页面，看起来很不错，然后有人在手机上打开它。你精心排列的列现在被挤成了一条细缝，文本跑到了边缘外，本应没有水平滚动条的地方出现了一条。没人写过该网站的单独手机版本。只有一个页面，它必须在380像素的手机和1400像素的显示器上看起来都很好，而不需要你复制两份所有东西。这种适应性就是响应式设计，而且它的大部分是由你已经拥有的工具构建的。
响应式的含义和视口
一个**响应式**页面是一个能够改变自身形状以适应它所呈现的任何屏幕的页面。同样的HTML和同样的CSS为手机、平板电脑和桌面提供服务，布局会调整，使得没有任何东西溢出，也没有任何东西感到紧张。你没有在构建三个网站。你正在构建一个会弯曲的网站。
在任何这些工作之前，浏览器需要HTML中的一条指令。手机过去常常装作是桌面宽度并将整个页面缩小以适应，这就是为什么旧网站显示为一个小的、缩小的混乱。这一行位于你HTML的<head>中，告诉手机改为使用其真实宽度：
<meta name="viewport" content="width=device-width, initial-scale=1" />没有它，你的CSS就是在为一个虚拟的宽屏幕制作样式，你精心设计的布局永远没有机会。
流动布局优先
直觉的做法是立即编写特殊的手机规则，但在你编写单个规则之前，许多响应性是免费的。如果你用**流动**值构建，那些随空间伸缩的值，布局已经适应了。
两个习惯承载了大部分内容。将宽度设置为百分比，使盒子占其容器的一部分而不是固定的像素数，并使用max-width使某物在小屏幕上可以缩小但在大屏幕上永远不会超过舒适的阅读大小：
.container {
width: 90%; /* 占它拥有的任何空间的90% */
max-width: 60rem; /* 但在大屏幕上永远不超过60rem */
margin: 0 auto; /* 居中 */
}在手机上，这个容器是狭窄屏幕的90%。在显示器上，它停止在60rem处增长并居中。你没有编写手机规则；这些值进行了适应。
max-width使它们在手机上收缩而不会在显示器上拉伸太宽。这两个值自己适应布局。流动优先构建，你将需要少得多的接下来的手机特定规则。 媒体查询
有时流动值不够，你需要布局在特定大小真正改变，例如在手机上垂直堆叠但在桌面上排成一行的菜单。那就是**媒体查询**的用途：一个CSS块，仅在屏幕满足你设置的条件时应用。
从小屏幕的样式开始作为你的常规CSS，然后添加一个查询来为更宽屏幕的改变分层：
.nav {
display: flex;
flex-direction: column; /* 在小屏幕上堆叠 */
}
@media (min-width: 40rem) {
.nav {
flex-direction: row; /* 有空间后排成一行 */
}
}@media (min-width: 40rem)内的规则仅在屏幕至少40rem宽时切换。在这之下，普通的.nav规则应用，菜单堆叠。
@media (min-width: ...)添加更大屏幕的改变。这样手机视图就是你的起点，而不是事后贴上的补丁。 选择断点
一个**断点**是媒体查询启动和布局改变的宽度。诱人的方法是查找一个流行手机或平板电脑的宽度并匹配它。那就是陷阱。有数百个设备大小，它们每年都在变化，追赶它们是一场你无法赢的游戏。
更好的问题是：在什么宽度时，这个布局开始看起来不好？慢慢地加宽你的浏览器并观看。当一行文本变得太长而无法舒适阅读，或两列变得太窄时，那就是断点应该出现的地方，无论它碰巧是什么数字。
/* 选择断点是因为文本在这里变得太宽了，*/
/* 而不是因为手机碰巧是这个大小 */
@media (min-width: 45rem) {
.article { max-width: 38rem; }
}