响应式布局、流式布局

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

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

1.宽、高、padding、margin:百分比;

2.文字大小(font-size):em;计算公式参照万能公式;

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

3.图片:百分比;

       如:img,object,video,ended {

                    max-width:100%;

              };

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

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

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

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

猜你喜欢

转载自dingliang-321.iteye.com/blog/2263983