响应式设计是布局设计中的一个子类别,但是由于其优势(同一份代码,在不同屏幕尺寸的屏幕上显示效果都不错),也可以认为其就是最优的选择
布局技术一览
如果指常规的布局技术,那么指的是将东西在页面上移动位置,或者让东西之间具有某种关系,包括的CSS属性可能有:display, float ,clear,position,padding,margin,但单纯的使用这些技术并不一定能让设计具有响应能力,比如,理论上只需要position这种一个坐标系就可以让所有东西都定位在某一个相对位置,但是如果页面放大,缩小并不会达到响应的效果
CSS布局技术
-
Normal Flow
-
Display
-
Flexbox
-
Grid
-
Float
-
Position
响应式布局
流式布局:使用百分比设置宽度
固定宽度布局:使用px来设置宽度
简单基于浮动的响应式布局:大屏幕上浮动,小屏幕上不浮动
简单的基于弹性盒子的响应式布局:大屏幕使用弹性盒子,小屏幕不使用
简单的基于网格的响应式布局:小屏幕使用网格,大屏幕不使用
响应式字体大小:不同屏幕设置了不同的字体大小
响应式字体大小:采用vw作为单位
不同方式的抉择
理论上存在多种方式实现同样的效果,那么怎么从多种方式中选出最优的方式呢&