网页设计有三种布局，分别是固定布局、流式布局和响应式布局

当前位置: 首页 -> 新闻中心 -> 网页设计知识

网页设计有三种布局，分别是固定布局、流式布局和响应式布局

信息来源：web.fuhai360.com | 发布时间：2022年03月23日

网页设计有三种布局，分别是固定布局、流式布局和响应式布局，1.固定布局（Fixed Layout）网页上所有元素大小以像素为单位，使用绝对宽度/高度。屏幕缩小时，使用横向和竖向的滚动条来查阅被遮掩部分；屏幕放大时则内容居中，填充背景。
这种布局相对来说是最简单的，有很强的稳定性和可控性，在窗口拉伸的过程中规避了内容重叠，放缩的情况，仍保持原始比例，静态位置和内容样式。缺点是不能根据用户的屏幕尺寸做出不同的表现，对大屏或小屏用户来说体验不佳。
2.流式布局（百分比布局）
页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。元素的宽度按照屏幕分辨率自动进行适配调整，当前屏幕分辨率发生改变的时候，页面中的元素大小也可以跟着改变。一般会设置一个最大值和最小值搭配使用，最小值是保证页面不会错乱的情况下的宽度，到达最小值后，不再适应，出现滚动条。
一个区域的尺寸宽度设置为自适应，但是对于里面的小图标、字体等是固定大小的。图片信息设置宽度为百分比自适应即可。
可以用于解决类似设备不同分辨率之间的兼容问题。网页有很强的可塑性和流动性，元素大小和间距会根据尺寸随时调整，以达到适应当前页面的目的，但页面里元素的大小会变化而整体布局不变。缺点是因为宽度使用百分比定义，但是文字大小使用px固定，屏幕过大或过小时会显得不协调。
3.响应式布局
响应式布局可以做到无论在手机还是在电脑上查看网站，都能拥有一致的用户体验。大多数响应式网站需要三个或四个断点，根据缩放的大小，会显示出对应的样式，内容也将相应地进行调整，使布局看起来更合理。

上一条 网页设计里面的响应式布局网站的优势和劣势分析 下一条 大标题作为网页的视觉中心也是网页设计中常见的简约设计

返回列表