手机、“平板手机”、平板电脑、台式机、游戏机、电视，甚至可穿戴设备中存在多种不同的屏幕尺寸。屏幕尺寸始终在变化，因此至关重要的是您的网站能够适应现在以及将来的任何屏幕尺寸。此外，我们与不同设备的交互方式也不同。例如，您的一部分访问者将使用触摸屏。现代响应式设计将所有这些因素都考虑在内，进而优化每个人的体验。
设置设备可视区域
多种设备优化页面时，必须在文档头部包含一个元可视区域标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
元可视区域标签为浏览器提供如何控制页面尺寸和缩放的指示。
用户会通过增大字体何缩放内容来适应屏幕尺寸，提升内容的视觉效果。
简要说明：像素的问题
像素问题:
物理像素（设备像素和 逻辑像素
物理像素（设备像素）：是电脑的分辨率的大小，如果电脑的分辨率为2880 x 1800的话，表示屏幕上整齐排列着 5,184,000货真价实的物理像素
从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，单位为
pt
逻辑像素（设备独立像素）： 一般写css样式中的px为逻辑像素,css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的.
一般px是一个相对单位，相对的是设备像素（device pixel）
在页面进行缩放操作也会 引起css中px的变化，假设页面放大一倍，原来的 1px 的东西变成 2px，在实际宽度不变的情况下1px 变得跟原来的 2px 的长度（长宽）一样了（元素会占据更多的设备像素）
px会受到下面的因素的影响而变化：
每英寸像素（PPI）
ppi
ppi （pixel per inch），每英寸像素，表示每英寸所包含的像素点数目，更确切的说法应该是像素密度。数值越高，说明屏幕能以更高密度显示图像
计算公式如下：
- 设备像素比（DPR）： 获取：window.devicePixelRatio
当dpr为3，那么1px的CSS像素宽度对应3px的物理像素的宽度，1px的CSS像素高度对应3px的物理像素高度
meta 属性的使用控制页面
width=device-width
使用width=device-width元可视区域值可以指示页面采用设备独立像素匹配屏幕宽度。
一个设备（或密度）独立像素代表一个像素
initial-scale=1
initial-scale=1值可以指示浏览器在 CSS 像素和设备独立像素之间建立 1:1 的关系，
从而在无需考虑设备方向的情况下使页面能够充分利用完整的横向宽度。
按可视区域调整内容尺寸
桌面端和移动端设备的用户都习惯于垂直滚动网站，而不是水平滚动网站；强制用户水平滚动网站或通过缩小来显示全部页面都会导致糟糕的用户体验。
在开发带有元可视区域标签的移动端网站时，很容易意外创建尺寸与指定可视区域不太匹配的页面内容。例如，若显示图像的宽度大于可视区域宽度，就可能会导致可视区域水平滚动。您应该调整内容来匹配可视区域的宽度，使用户无需进行水平滚动。
图像
一张图像具有固定的尺寸，如果该图像比可视区域大，就会出现滚动条。对于这个问题，最常用的处理方法就是将所有图像的max-width指定为100%。在可视区域尺寸比图像小的情况下，这将使图像缩小来与空间相匹配。然而，因为max-width是100%，而不是width是100%，图像并不会拉伸到大于其自然尺寸。一般来说，较安全的做法是将以下内容添加到您的样式表中，这样您就永远不会遇到图像导致的滚动条问题了。
img {
max-width: 100%;
display: block;
}
布局
通过为宽度设置百分比，列的宽度就会始终保持在容器宽度的特定百分比。这意味着列会随之变窄，而不会出现滚动条。
弹性方框布局、网格布局和多列布局等现代 CSS 布局技术使创建这些灵活的网格变得更加容易。
弹性方框布局
当你有一组不同尺寸的元素，而你希望这些元素能够和谐地列进一排或多排，并且较小的元素占据较少的空间，而较大的元素获得更大的空间时，这种布局方法是非常理想的。
.items {
display: flex;
justify-content: space-between;
}
在响应式设计中，您可以使用弹性方框布局将元素显示为单行排列，或者随着可用空间的减少而组成多行排列。
CSS 网格布局
CSS 网格布局使您能够非常直观地创建灵活的网格。如果考虑先前的浮动元素示例，我们可以不使用百分比来创建列，而是取而代之地使用网格布局和fr单位，该单位代表容器中的一部分可用空间。
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
多列布局
对于某些布局类型，您可以采用多列布局 (Multicol)，这种布局可以利用column-width属性创建响应式的列数。您可以在下方的演示中看到，只要有空间容纳另一个200px的列，布局中就会添加新的列。
使用 CSS 媒体查询来提高响应性
有时您会需要对布局进行更大规模的更改来支持特定的屏幕尺寸，而上述所展示的技术并不允许这一点。媒体查询在这种情况下非常实用。
媒体查询是可以应用于 CSS 样式的简单筛选器，能够根据渲染内容的设备类型或该设备的特征来轻松更改样式，例如宽度、高度、方向、悬停功能，以及设备是否被用作触摸屏。
基于可视区域大小的媒体查询
媒体查询使我们能够创建响应式体验，提供适用于小屏幕、大屏幕及介于两者之间任何屏幕尺寸的特定样式。因此，我们这里检测的特征是屏幕尺寸，而我们可以检测以下属性。
width（min-width，max-width）height（min-height，max-height）
如何选择断点
请不要根据设备类别来定义断点。根据如今被广泛使用的特定设备、产品、品牌名称或操作系统来定义断点可能会导致维护的噩梦。反之，应该由内容本身来决定布局如何与容器相适配。
由小到大地选取断点
首先将内容设计为适合小屏幕的尺寸，然后逐步扩展屏幕尺寸，直到需要设置一个断点。这个做法使您能够根据内容来优化断点，同时保持尽可能少的断点。
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
最后，请重构 CSS。在max-width为600px的媒体查询中添加仅适用于小屏幕的 CSS。在min-width为601px的媒体查询中添加适用于更大屏幕的 CSS。
可以通过覆盖的形式添加样式
@media (min-width: 300px) {
width: 100%
}
@media (min-width: 600px) {
width: 50%
}
600px以上尺寸的页面会覆盖300px下的
在 Chrome DevTools 中查看媒体查询断点
设置好媒体查询断点后，您会希望查看您的网站在有了断点后的呈现效果。虽然您可以调整浏览器窗口大小来触发这些断点，但 Chrome DevTools 有一项内置功能，可以让您轻松查看页面在不同断点下的呈现效果。
DevTools 显示的天气应用程序在较宽的可视区域下的呈现效果。
请打开 DevTools，然后开启设备模式。默认情况下开启的是响应模式。
