在深圳地区拥有十多年网站设计经验的国人伟业为大家分享以下关于网站设计中如何使用考量宽度的技巧:
设备因素即确认项目主要展示的屏幕设备是哪一种,它们对应的分辨率是多少。最粗略的划分,可以将设备划分成 PC 端和移动端。这两者受制与显示的尺寸,系统的限制,在设计和操作上都有比较大的区别。
浏览设备
浏览设备即网页用户所使用的屏幕类型,主要考量的标准是屏幕的分辨率(长宽像素数)。常见的 PC 屏幕分辨率有 1280×800、1600×900、1440×800、1366×768、1920×1080、2560×1440 等,再加上一些更加不常见的(比如 surfacebook 的 3000×2000),可以列出数十种,这是大家都已经知道的事情。
所以基于这个前提,很多人会去查找关于屏幕使用分辨率的统计表格,比如下图这种,然后得出最常用的分辨率是 1080P。有了数据支撑,我们不就可以开始动手设计了?
实际上这个做法是错误的。对于网页设计来说,我们首先应该确定的是──最小适配屏幕。
因为在一般场景下,显示器分辨率如果大于画布,内容可以被我们正常访问;如果小于画布,内容就会显示不全,相当于低于这个分辨率设备的用户被我们放弃了。
所以,做个简单的计算,如果以 1920×1080 为基础,则支持的用户数为 27.38 %;如果是 800×600,则支持用户数低于 3%。
这么考虑的话,我们是不是只要支持最小的分辨率即可?当然也不是。
在今天,1024 以下宽度的设备已经非常稀少,即便是 1024 本身,主流的设备也是平板而不是一般的 PC 电脑。当这些设备的数量低到成为绝对的非主流时,是可以选择忽略它们,以满足更多人的需要。
所以通常,我们最低支持的分辨率,不是 1024×768 就是 1280×800。如果大家不相信,可以去各类网站中,用 QQ 截图工具量一下主要内容区域的宽度,很难出现大于这两个数值的情况。