关于响应式设计

1. 响应式设计：fluid grids 、 fluid images、 media query三种技术的混合使用。

2. 现代布局技术： Multiple-column layout（多栏布局）、Flexbox（弹性盒子）、 Grid（网格）。

3. 自适应设计方式：主要有响应式设计、现代布局技术两种方式。

4. Multiple-column layout（多栏布局）：若内容被分成指定列数，浏览器则会算出这些列的大小，列的尺寸随着屏幕尺寸变化而变化；若指定一个最小宽度，浏览器则会尽可能多数量地创建这一宽度的列，然后将所有列之间的剩余空间共享出去，因而列的数量会随着空间的多少而改变。👉详情
   column-count:列的数量;
   column-width:列的宽度;
   column-gap:列的间隙;
   column-rule:{
   column-rule-color:列与列之间的间隔线颜色;
   column-rule-style:列与列之间的间隔线样式;
   column-rule-width:列与列之间的间隔线宽度;
   }

5. Flexbox（弹性盒子）：弹性的物件将参照容器里面的空间的大小，缩小或放大物件之间的空间，通过更改flex-grow和 flex-shrink的值，可以进行更改。👉详情
   flex：flex-grow，flex-shrink，flex-basic，align-self
   使用align-self时，float、clear、vertical-align均会被忽略（失效）

6. Grid（网格）：👉详情
   display: grid; grid-template-columns: 每列的宽度 每列的宽度 每列的宽度 ····
   display: grid; grid-template-rows：每行的高度 每行的高度 每行的高度 每行的高度 ···
   grid-gap：行之间的间隙宽度，列之间的间隙宽度
   grid-row-gap：行之间的间隙宽度
   grid-column-gap：列之间的间隙宽度
   grid-column：控制项目将使用的列数
   grid-template-rows/columns: repeat（列或行重复的次数，每列的宽度）
   (若列或行重复的次数为auto-fill时，不断插入空行或列并将您的项目推到一边；若列或行重复的次数为auto-fit时，折叠这些空行或列并拉伸您的项目以适应容器的大小。)
   grid-template-areas:
   “header header header”
   “advert content content”
   “advert footer footer”;

7. Responsive images（响应式图片）：一种可以在不同的屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片。
   （使用响应式的原因：小屏幕上显示网页时，会产生分辨率切换问题（resolution switching problem）即由于位图有固定数量的像素宽，固定数量的像素高，如果显示尺寸大于原始尺寸，则一张自身较小的位图看起来会有颗粒感，而且在比图片实际尺寸小的屏幕上显示一张大图，会浪费带宽。）
   （由于位图和矢量图各自的👉优缺点，故一般响应式图片都为矢量图。）

8. 创建自适应图片：
   (1) Resolution switching: Different sizes（分辨率切换：不同的尺寸）：
   img标签 +src、alt、 srcset 、 sizes属性；
   (2) Resolution switching: Same size, different resolutions（分辨率切换: 相同的尺寸, 不同的分辨率）：img标签 + src、alt、 srcset + x语法
   src：图片源;
   alt：图片未加载或者加载出错鼠标经过图片时的提示性内容;
   srcset：允许浏览器选择的图像集，以及每个图像的真实大小;
   sizes：定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，对应用来显示图片的尺寸
   

9. 美术设计问题（art direction problem）：更改显示的图像以适应不同的图像显示尺寸，即在小屏幕上显示一幅图片的包含了重要细节的裁剪版本（是一种针对小屏幕浏览网页不便的改进方法。）：使用picture、source 标签。
   

10. 响应式布局：👉参考

11. 媒体查询( media query):👉详情

• HTML 中的媒体查询:
  
  
  
  

• JavaScript 中的媒体查询
  
  样式改变时的点，被叫做断点（breakpoints）

11. liquid site ：
    缺点：导致了小屏幕上的设计会挤成一团，以及大屏幕上难以阅读的很长的行长度；fixed width site 缺点：比设计屏幕更窄的屏幕上会出现一个水平滚动条，比设计屏幕更宽的屏幕边缘上还会有许多空白。
12. 实际常见做法：

//方法一：设计图纸上屏幕宽度 / 实际屏幕宽度 = 实际浏览器里font-size / 设计图纸上font-size 

13. 啊这：

14. 啊这：

15. 啊这：

16. 啊这:

17. 啊这:

18. 啊这:

19. 啊这：

20. 啊这：