关于css:CSS-静态流式自适应弹性响应式布局

26次阅读

共计 444 个字符,预计需要花费 2 分钟才能阅读完成。

简略总结一下对于 css 布局的了解:

动态布局 :元素均采纳 px 设置宽高;

流式布局 :子元素次要采纳 % 来设置宽度,特点是屏幕太大或太小均不能较美的显示子元素,然而子元素的绝对布局不会变动,比如说,一行是 5 个 div, 每个宽度设为 20%,父元素宽为 500px 时,每个 100px, 然而子元素最完满的宽度却是 80px,通常搭配 min-width、max-width 应用,不至于过大过小;

自适应布局 :每个屏幕分辨率对应一个动态布局,常常采纳 @media 联合 min-width、min-height 应用,给不同尺寸的设施切换不同款式;

弹性布局 :子元素采纳 remem 的布局,也是一种绝对布局,强调等比缩放,绝对于 % 更灵便,em 是绝对父元素(用的少),rem 是绝对 html 根元素,而页面的整体布局仍采纳 px 和 %,另外,字体不适宜应用 rem, 字体的大小和字体宽度不成线性关系;

响应式布局 :一个页面在所有的终端上均有较好的展成果,强调不同屏幕要有不同的显示,通常采纳弹性布局 + 流式布局 + 媒体查问,优良页面布局的规范;

正文完
 0