掌握CSS第8章响应式布局学习笔记
原文部分被跳过，注释顺序和章节顺序颠倒了
响应式案例在精通CSS第八章响应式布局学习案例中，可以和flexbox、grid布局一起吃。 做了三种情况，一种是flexbox，一种是常规场景，既不是flexbox也不是网格布局，还有网格布局。
浏览器层
Viewport是中国联通Web开发中一个非常重要的概念。 它是苹果公司在推出 iPhone 时首次发明的。 其目的是让iPhone的小屏幕尽可能完整地显示整个网页。 通过设置图层，无论网页原始帧率规格有多大，都可以缩小显示在手机浏览器上，从而保证手机上的网页看起来更像桌面浏览器。 苹果引入层的概念后，大多数联通开发者也认同这种做法。
CSS 像素与硬件像素
首先，设备本身的硬件像素和CSS的像素是不同的。 以iphone5/SE为例，在Chrome中，设备的像素为320×568320×568320×568，设备的硬件像素（分辨率）为1136×6401136×6401136×640，即1 个 CSS 像素对应 2 个硬件像素。
CSS 像素到硬件像素的缩放因子，范围从 1 到 4，具体取决于设备。 要理解这个细节，就依赖于自适应响应背景图像的适配。 如果尺度系数差异太大，则剪切后的图像可能会非常模糊。
视口定义的差异
移动终端的流行使得设备制造商和发明者提出了不同的概念。
默认图元（默认视口）
也就是原生页面的未优化版本，以网上的案例为例，它本身并没有针对移动端进行适配。
为了让未优化的窗口能够在移动端显示，手机上的浏览器一般会模拟一个长度为1000px的图层，然后强制显示页面：
作为移动用户，如果想要查看完整的信息，就必须进行拖放操作响应式布局css3，如果想要查看具体的信息，就需要将页面放大。 这种方法不太人性化。
理想视口
理想的窗口也是模拟层，但其页长接近设备本身的规格。 一般对于手机来说，宽度为300-500 CSS像素； 对于平板电脑，宽度约为 800-1400 CSS 像素。
可见基元（视觉视口）
可见窗口中可以看到的图层仍然以学城在线为例。 在移动端，其可见层比PC端要小。
布局视口
这就是布局窗口的由来。 在实现页面时，我们应该将可见部分——可见层——实现为布局层。
配置层
就在肚子上贴个标签吧：
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
媒体类型和媒体查询 媒体类型
指定设备类型
这部分已经在HTML5权威手册第7章的学习笔记中为考试准备了。
目前使用的类型基本只有丝网、印刷、全部。
媒体查询
所需积分。
Media Query提供了指定设备——扩展媒体类型的能力，其句子类型是媒体类型+媒体条件的组合：
/* 媒体类型:screen, 媒体条件: min-width */
@media screen and (min-width: 600px) {
/* 这里放条件 */
}
其他一些功能：
响应式设计和结构化 CSS 移动优先原则
移动优先的原则是，首先关注联通设备上内容的显示响应式布局css3，然后再做乘法，因为乘法总是比加法容易做。
CSS 文件中的第一条规则，即针对最小的屏幕，也针对那些不支持媒体查询的浏览器
接下来在联通设备和各种浏览器上进行测试，并通过调整窗口大小逐步完善功能。
另外，我们还要善于使用max-width来减少代码量。
例如，假设要在小型设备中使用行距较窄的字体，按照联通优先原则编写的CSS如下：
body {
font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}
h1,
h2,
h3 {
font-family: "open Sans Condensed", "Arial Narrow", Arial, sans-serif;
}
@media only screen and (min-width: 37.5em) {
h1,
h2,
h3 {
font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}
}
这里有重复的代码，使用 max-width 可以解决这个问题：
body {
font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}
@media @only screen and (max-width: 37.5em) {
h1,
h2,
h3 {
font-family: "open Sans Condensed", "Arial Narrow", Arial, sans-serif;
}
}
这样，行距较窄的字体只能在小屏幕上使用。
媒体查询的位置
首先，媒体查询的放置位置没有固定的位置。 其次，使用媒体查询不会增加CSS的权重。 因此，作为开发人员，您可以决定在何处放置媒体查询。
但总的来说，本书提出了以下三点建议：
影响整个页面布局的媒体查询通常建议放置在布局相关规则附近。 调整网站组件中的详细信息的媒体查询可以放置在定义组件的样式附近。 最后，经常更换、打补丁的样式建议放在最后。
总之，仍然采用先概括，后具体的原则。
断点参考
作为参考，引导程序中有六个像素断点：
断点尺寸
X 小号
小的
≥576像素
中等的
≥768像素
大的
≥992像素
特大号
≥1200像素
特大特大号
≥1400像素
基本上可以适配大部分设备
几种响应式设计模式
书中推荐的几种模式
响应式文本栏
精通CSS前面第4章总结中提到的多列布局（Mult-Column Layout），它的效果如下：
只需一行代码即可实现响应式文本列，并且不需要媒体查询：
.multi-col {
column-width: 16em;
}
不过，文本栏在网页的布局中似乎用得不多。
无需媒体查询的响应式 Flexbox
Flexbox的优势还是很明显的。 首先，在可以完成任务的情况下，没有媒体查询确实会增加代码的复杂性。 其次，flexbox不会因为图层的变化而变化，而是根据容器的大小动态确定。 是的，对于非结构性内容来说，适用范围越来越广。
响应式网格和网格模板区域
《掌握CSS》第七章学习笔记（第二部分）中提到了网格模板，响应式布局的实现可以通过在不同媒体查询域之间重新布局网格模板来达到目的。
