欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

响应式布局、流式布局 em响应式布局流式布局百分比FitVids

程序员文章站 2022-07-15 16:36:47
...

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

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

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

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

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

3.图片:百分比;

       如:img,object,video,ended {

                    max-width:100%;

              };

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

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

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

 

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