CSS 静态、流式、自适应、弹性、响应式布局

简单总结一下对于css布局的理解:

静态布局:元素均采用px设置宽高;

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

自适应布局:每个屏幕分辨率对应一个静态布局,经常采用@media结合min-width、min-height使用,给不同尺寸的设备切换不同样式;

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

响应式布局:一个页面在所有的终端上均有较好的展效果,强调不同屏幕要有不同的显示,通常采用弹性布局+流式布局+媒体查询,优秀页面布局的标准;

你可能感兴趣的:(css)