前端开发：页面布局详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51748707/article/details/124888542

本文介绍了前端开发中常见的五种页面布局方式：静态布局、流式布局、自适应布局、弹性布局和响应式布局，详细阐述了每种布局的特点、应用场景及优缺点。重点讨论了DIV+CSS布局和HTML5+CSS3布局的优势，如便于维护、SEO优化和语义化特性，强调了响应式布局在兼容性上的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.常见的五种布局方式

1.静态布局：
给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。

优点：设计简单。

缺点：对于不同尺寸屏幕的兼容性不好，特别是移动端。

2.流式布局：
元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。

优点：页面元素宽高可以自适应调整。

缺点：屏幕尺度跨度过大的情况下，页面不能正常显示。

3.自适应布局：
屏幕尺寸或分辨率变化时，页面元素会跟着变化。

缺点：页面元素不会随着窗口大小的调整而发生变化。

4.弹性布局：
弹性布局又称为盒子布局或flex布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式。

优点：容易上手，理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。

缺点：高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。

5.响应式布局：
使用meta标签设置，页面元素宽度随窗口调整自动适配。采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。

优点：对PC和移动端有着非常好的适应，只要有足够的耐心，效果会非常棒。

缺点：媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。要想适配更多的屏幕大小，工作量大，设计也需要多个版本。

2.应用场景

1.如果只做pc端，那么静态布局（定宽度）是最好的选择；
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，这个时现在比较流行的方式前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。