固定布局(静态布局)
由于最开始时人们之间显示器的屏幕大小没有什么差异,因此以像素作为基本单位的布局方式在当时很流行。特点就是宽度都是固定的,所以内容并不会随着浏览器页面的大小而改变,也就是说,因为像素是绝对单位,所以用像素规定了内容有多大,它就会严格地按照大小要求呈现,并且居中布局。
后来显示器的款式越来越多,大小也不一样,所以之前写的固定大小的网页缺点就出来了, 缺点也非常明显。当浏览器的页面小时,无法显示网页的而所有内容;当浏览器的页面大时,两侧的空白过大。
应用场景:主要是在pc端使用。如:百度pc门户页面。
流动布局(流式布局)
针对上面这种情况下,流动布局运时而生
流式布局又称为百分比布局。随着屏幕的变化,页面的布局没有发生大的变化,进行适配调整,如栅栏,各模块之间使用了百分比。可以理解为静态布局的升级版,流式布局 = 静态布局 + 百分比布局;
优点:元素的宽高用百分比做单位,元素宽高随分辨率调整,布局变化不大。
缺点:屏幕尺度跨度过大的情况下,px部分不变化,百分比部分变化大,会显得页面展示非常不协调。
应用场景:左侧固定+右侧自适应、左右固定宽度+中间自适应,也主要用在pc端。
缺点就是文字无法进行流动
自适应布局
通过@media媒体查询,设置不同分辨率下设置对应的样式,可以理解为500~800是一种样式的展示,800~1000又是一种样式的展示,1000~1200又是一种样式设置。
优点:可以在已知的范围内实现对应屏幕的自适应。
缺点:对于未知的宽度不能自适应。
应用场景:pc和移动都可以使用
弹性布局flex
css3引入的布局方式
优点:方便、简单
缺点:存在兼容性问题。
应用:对于pc端的整体布局应用的不多,适合用在pc布局的局部,主要是用在移动端整体布局。
响应式布局:
响应式布局 = 自适应布局 + 流式布局 ;主流的做法是通过js计算根节点的rem来实现在不同屏幕下实现响应式布局,可以理解为自适应布局的精细版本。是目前最优秀的布局。
优点:适配pc和移动端,
缺点:对于一些屏幕情况需要特殊的处理。
参考:https://blog.csdn.net/weixin_43553755/article/details/117527726