响应式布局、流式布局

阅读更多

页面随网页大小变化而布局不乱、并且也随之大小变化：包括图片、文字、页面宽度等。

                                        万能公式： 目标元素 % 上下文元素 = 百分比尺寸。

1.宽、高、padding、margin：百分比；

2.文字大小（font-size）：em；计算公式参照万能公式；

       文字大小相对于父元素文字大小设定，行高相对于其本身文字大小设定。

3.图片：百分比；

       如：img，object，video，ended {

                    max-width：100%；

              }；

             这样设置css时，img标签中不可设置宽和高。

             通过max/min来设置图片显示大小的阀门。

4.视频：jQuery插件FitVids，来让视频引用全面显示，不会导致切割。

 

参考来源：《响应式Web设计》