网页宽度到底该怎么定

了解网页设计的宽度定义,势必要理解它们的底层原因,因为宽度的设置:只有合适的宽度,没有绝对正确的宽度。今天小编主要给大家分享网页宽度到底该怎么定,希望对你们有帮助!

网页宽度到底该怎么定

设备因素是确认项目主要显示哪种类型的屏幕设备,以及相应的分辨率。最粗略的划分就是PC端和移动端。 这两者受制于显示器的尺寸,系统的局限性以及设计和操作都有很大差异。

1.浏览设备

浏览设备是Web用户使用的屏幕类型。 主要考量的标准是屏幕的分辨率(长度和宽度、像素)。 常见的PC端屏幕分辨率为1280×800、1600×900、1440×800、1366×768、1920×1080、2560×1440等,加上一些不太常见的(如 surfacebook 的3000×2000)。这些是比较常见的。所以基于这个前提,很多人会在屏幕的分辨率上查找统计表。

对于网页设计,我们首先要确定的是——最小适配屏幕。

因为在一般场景下,如果显示器分辨率大于画布,则我们可以正常访问内容; 如果小于画布,则内容将不完整显示出来,这相当于放弃了低于此分辨率的用户。

因此,我们做了简单的计算,如果基于1920×1080,则支持的用户数量为27.38%; 如果是800×600,则支持的用户数小于3%。考虑到这一点,我们是否支持做最小的分辨率? 当然不是。

今天,宽度低于1024的设备非常罕见。即使使用1024,主流设备也是平板电脑而不是普通电脑。当这些设备的数量低以至于它们变得绝对非主流时,可以选择忽略它们以满足更多人的需求。

通常,我们支持的分辨率至少不是1024×768就是1280×800。 如果大家不相信,可以访问各种网站并使用QQ屏幕截图工具来测量主要内容区域的宽度。

2.展示类型

可能有很多人已经听过响应式布局和自适应设计。首先,无论它们有何不同,它们都代表了随着浏览器窗口大小的变化而改变网页大小的技术。 比如星巴克官方网站的Bootstrap架构,在更改浏览器窗口的宽度后,可以获得不同的结果。

如果仍需要通过此内容了解页面的宽度,我不建议在实际项目中使用响应式布局和自适应设计,因为都需要熟悉前端架构和对CSS属性的基本认识,否则就无法直接考虑其它分辨率下的显示器显示效果以及在设计过程中制定不同元素的自适应设计。

12 12 分享:

相关课程

发表评论

登录后才能评论,请登录后发表评论...
提交评论

最新文章