在网页设计中,定宽页面和全屏页面有以下不同的注意事项:
一、定宽页面
-
尺寸确定
-
要考虑市场上常见的屏幕分辨率,目前笔记本常见分辨率为 1366768,台式机有 1440900、1920*1080 等。为保证小屏内容完整,常用定宽尺寸是 1200px,但实际会根据内容、导航、适配终端等因素调整。例如,简书首页宽度为 960px,京东订单详情为 1210px。
-
内容适配
-
定宽页面常用于详情、图片、字段不多的列表、内容流等。对于图片等内容,要注意在大屏下可能会显得小气。像站酷这样的网站在这方面处理较好,当屏幕宽度大于 1600 时,采用 1400 的定宽;当屏幕小于 1600,使用 1150 的宽,并且图片大小也会相应改变,淘宝和京东的商品列表页也有类似处理,设计时需要参考这种根据屏幕宽度灵活调整内容展示的方式。
二、全屏页面
-
最小适配宽度设置
-
全屏页面除两侧边界外,内容会随着屏幕大小而撑满。要设定最小的适配宽度,当页面低于该宽度时不再适配,会出现横向滚动条。这个最小适配宽度的设置要综合考虑页面内容的正常显示范围,例如一些管理类网站、字段很多的列表页等不同类型页面的内容完整展示需求。
-
适配方式选择
-
适配方式有多种。一是根据屏幕大小等比例放大(或者根据不同的屏幕设定不同的放大 / 缩小比例),要确保内容在不同屏幕比例下都能合理展示,避免出现拉伸变形等情况;二是根据屏幕大小拉宽元素,元素高度不变,但在大屏下可能导致元素比例变形,影响视觉效果,所以这种方式要谨慎使用;三是根据屏幕大小,增加 / 减少每行显示的内容多少,多数适合于页面内容为网格布局的情况;四是使用 bootstrap 等框架,采用响应式布局,根据屏幕大小改变大小的同时改变元素排版方式,选择时要根据页面内容、在大小屏幕下的显示情况以及整个网站所使用的框架等来综合考虑。