基本网页设计中的尺寸选择

时间：2023-10-08 23:06:01 | 来源：网站运营

时间：2023-10-08 23:06:01 来源：网站运营

基本网页设计中的尺寸选择：作者: xteamer成员: junyi

【摘要】在设计和实现PC端网页时，我们通常选用1200px宽度作为安全区域的设计的标准。这主要取决于目前市面上的设备的主流分辨率及栅格概念的出现。

根据百度流量研究院的最新数据显示，2019年10月份我国网民访问PC网页的主流设备分辨率仍然为1920*1080，占总百分百为42.94%。很显然，绝大部分的屏幕分辨率都已经超过了1366*768，在适配网页时则不需要对1366宽度以下的尺寸做特殊处理。可见，1920px在目前是PC端网页设计的标准。

需要注意的是，此图中的分辨率数值仅作为上限的参考，在设计网页时，不能够将页面的实际显示内容的区域（也成为安全区）等同于此上限看度。考虑到在Windows等部分浏览器上，滚动条本身也需要占据一定的宽度，因此，过分的贴边或是接近于整屏幕宽度的设计是不被推荐的。

以1920px宽度作为设计标准，在整个页面中，网页的安全区域则为1200px。换句话说，我们只要保证网页的实际内容展示区域控制在1200px这个范围内，就能保证整个页面在不同尺寸的浏览器访问时能够完整的显示出所有的内容。

为了布局方便，我们通常会将内容区域用栅格进行划分，这里我们一般会将内容区域划分为12格或者24格。同时在栅格间增加通用固定的间距，可以很好的处理大部分情况下的垂直排列问题。

使用12格或24格的好处：能够倍2、3、4整除；方便处理内容区域中2:1；1:2:1这一类常见的间距分布。

栅格的计算方式：

我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间距设置为“i”，此时我们把“a+i”定义为“A”，他们之间的关系如下：

W=(a*n)+(n-1)*i

由于a+i=A

可得(A*n)-i=W

我们定义了W为1180px，A为50px，i为20px，所以n=24

当我们设置设计栅格时，可以将总宽度设成1180（1200px安全区域减去两边栅格的留白），页面分为24栏，每一栏的宽度为30px，间距为20px

使用栅格系统，可以有效提高网页的规范性。在栅格系统下，页面中的元素尺寸都是有同一基准线和规律的，而基于栅格系统进行设计，可以让整个网站和各个页面的布局保持一致，增强页面统一性，提升用户体验。

---

欢迎关注 技术团队的本站账号 我们凭团队实例运作以下专栏， 必须干货！

互联网创业专栏 (我们小伙伴的创业历程)

与您一起聊技术 (APP、微信公众号、小程序、H5 技术总结)

互联网产品研发管理 (我们公司对产品结构的管理思路)

我们是不一样的技术团队：

我们认为:所有的企业行为，都解读为交易行为，无论是摩拜单车、外卖平台、自动售货机、招聘社区、家政服务，都用交易的语言来表达，我们专栏里面有很多实际案例和开发过程和交付流程

类似于元素周期表，我们把交易拆解成元素级别，根据业务定制组装，完全复原个性化需求，我们专栏里面有很学术也很实际的介绍

每个项目设置: 导师成长基金、参与人员的奖励，全员股权池，创业氛围浓郁，我们专栏公开分享了我们的一些经验

专治各种复杂的业务场景， 我们通过简洁的元素和分层组合，来完成复杂场景的业务定制，我们在这一块有非常多的案例，在互联网创业专栏里面有详细描述