响应式布局、流式布局 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设计》