响应式设计总结

响应式设计是布局设计中的一个子类别，但是由于其优势（同一份代码，在不同屏幕尺寸的屏幕上显示效果都不错），也可以认为其就是最优的选择

布局技术一览

如果指常规的布局技术，那么指的是将东西在页面上移动位置，或者让东西之间具有某种关系，包括的CSS属性可能有：display, float ,clear,position,padding,margin，但单纯的使用这些技术并不一定能让设计具有响应能力，比如，理论上只需要position这种一个坐标系就可以让所有东西都定位在某一个相对位置，但是如果页面放大，缩小并不会达到响应的效果

CSS布局技术

1. Normal Flow

2. Display

3. Flexbox

4. Grid

5. Float

6. Position

响应式布局

流式布局：使用百分比设置宽度

固定宽度布局：使用px来设置宽度

简单基于浮动的响应式布局：大屏幕上浮动，小屏幕上不浮动

简单的基于弹性盒子的响应式布局：大屏幕使用弹性盒子，小屏幕不使用

简单的基于网格的响应式布局：小屏幕使用网格，大屏幕不使用

响应式字体大小：不同屏幕设置了不同的字体大小

响应式字体大小：采用vw作为单位

不同方式的抉择

理论上存在多种方式实现同样的效果，那么怎么从多种方式中选出最优的方式呢&