固定宽度和自适应的网页布局设计，各有哪些优劣？
时间：2024-02-17 19:05:01 | 来源：网站运营
时间：2024-02-17 19:05:01 来源：网站运营
固定宽度和自适应的网页布局设计，各有哪些优劣？：问题的提法并不恰当 我解释后会修改问题
固定宽度 vs 自适应 不等价于 窄屏 vs 宽屏
- 固定宽度的设计可宽可窄 可以是 770, 913, 1000, 1116 或任意像素值
- 自适应的设计当用户使用小屏幕或小浏览器窗口时 宽度也会自动缩小到 960 乃至 600 像素以下
- 介于完全固定与完全自适应之间 自适应同时有最小/大宽度的设计也很常见
- 自适应有种特殊情况 一般称为 responsive design 则是对不同宽度分别做优化 动态调整页面设计 窗口宽度为 240, 480, 800, 1024, 1440 时会显示不同的布局
现在更多人只把最后一种自适应称作自适应网页设计 (或响应式设计) 简单的可变宽度通常成为流动式设计 (fluid web design) 或流动布局 (fluid layout)
自适应设计出现前 做网页通常要面临定宽和流动的选择
完全固定大小的设计体验上会差一些 但是更加可控 更容易开发改进
可变大小体验会好一些但不是绝对的
即使是流动布局页面上真正可变宽的东西实际上不多——图片、侧栏、按钮等元素通常都是固定大小的 可变宽的就只剩下文字 然而注重用户阅读体验的产品 也不会允许文字宽度过于随意的变化 这也是为什么文字较多的页面一般不会采用流动布局
完全流动的设计很难找到 因为如果不设定最小宽度 当窗口太小时页面会变得完全不可读 如果不设定最大宽度 大屏上一段文字拉长到几千像素也无法阅读
移动设备的出现是对传统定宽和流动布局的主要挑战 这时自适应的布局就非常有必要了
可以参加 Heroku 的状态页面
https://status.heroku.com/ 请自己试试调整窗口大小来看效果
自适应的布局未来会成为潮流 这种设计同时满足了
- 根据用户窗口大小的不同做出改变
- 在一定宽度范围内提供稳定的视觉体验
缺点则有 对老旧和非标准浏览器的兼容性较差 对产品定义和设计能力的要求较高 对页面做出调整时 需要同时改变多种尺寸下的布局
还有另外一个现象 很多没有采用自适应布局的网页 都对不同元素指定了不同的策略——导航栏是变宽的(google) 正文是定宽的 侧边栏只在宽屏情况下展开(facebook) 用背景图片填充宽屏用户页面边缘的空白(百度贴吧) 这些都可以算做是简化版的自适应布局
在线咨询
