前端开发常见的五种布局⽅式及应⽤场景
前端开发常见的五种布局⽅式及应⽤场景
1.静态布局：
给页⾯元素设置固定的宽度和⾼度，单位⽤px，当窗⼝缩⼩，会出现滚动条，拉动滚动条显⽰被遮挡内容。优点：设计简单。缺点：对于不同尺⼨屏幕的兼容性不好，特别是移动端。
2.流式布局：
元素的宽⾼⽤百分⽐做单位，元素宽⾼按屏幕分辨率调整，布局不发⽣变化。优点：页⾯元素宽⾼可以⾃适应调整。缺点：屏幕尺度跨度过⼤的情况下，页⾯不能正常显⽰。
3.⾃适应布局：
屏幕尺⼨或分辨率变化时，页⾯元素会跟着变化。缺点：页⾯元素不会随着窗⼝⼤⼩的调整⽽发⽣变化。
4.弹性布局：
弹性布局⼜称为盒⼦布局或flex布局，⽤来为盒状模型提供最⼤的灵活性 ，任何⼀个容器都可以指定为 Flex 布局。 给⽗容器添加display: flex/inline-flex；属性 ，即可使容器内容采⽤弹性布局显⽰，⽽不遵循常规⽂档流的显⽰⽅式。优点：容易上⼿，理想状态是所有屏幕的⾼宽⽐和最初的设计⾼宽⽐⼀样，或者相差不多，完美适应。缺点：⾼度没有做到⾃适应，⼀些对⾼度，或者元素间距要求⽐较⾼的设计，则这种布局没有太⼤的意义。
5.响应式布局：
使⽤meta标签设置，页⾯元素宽度随窗⼝调整⾃动适配。采⽤⾃适应布局和流式布局的综合⽅式，为不同屏幕分辨率范围创建流式布局。优点：对PC和移动端有着⾮常好的适应，只要有⾜够的耐⼼，效果会⾮常棒。缺点：媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽⾼。要想 适配更多的屏幕⼤⼩，⼯作量⼤，设计也需要多个版本。
使⽤场景：
1.如果只做pc端，那么静态布局（定宽度）是最好的选择；
html的flex布局
2.如果做移动端，且设计对⾼度和元素间距要求不⾼，那么弹性布局（rem+js）是最好的选择，⼀份css+⼀份js调节font-size搞定；
3.如果pc，移动要兼容，⽽且要求很⾼那么响应式布局还是最好的选择，这个时现在⽐较流⾏的⽅式前提是设计根据不同的⾼宽做不同的设计，响应式根据媒体查询做不同的布局。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。