现在前端流行什么页面布局方式_CSS学习

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/3/4 4:31:28 共计：3586 浏览

现在前端流行什么页面布局方式？

前端常用页面布局分为下面几种：

1.静态布局

给页面元素设置固定的宽度和高度，单位用px。窗口发生变化时，会出现滚动条，内容会被遮挡。

优点：简单方便，不存在兼容问题。

缺点：网页无法根据用户设备屏幕的宽度进行自适应。

2.流式布局

也叫100%布局。宽度单位为百分比。流式布局常用的设计模板:左侧固定+右侧自适应，左右固定宽度+中间自适应。

优点：可以适应不同尺寸的屏幕

缺点：如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定

3.响应式布局

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

优点：适应pc和移动端，如果足够耐心，效果完美

缺点：

（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。

（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

4.弹性布局

就是采用css3中的flex属性。

优点：简单、方便、快速

缺点：CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。

以上就是我介绍的前端的4种布局方式。

我这有前端全套从入门到精通的视频教程，路线，源码，笔记。自学前端的小伙伴们有需要的可以关注我，免费分享给你们。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。