网站排名推广平台,提供网站排名推广优化、关键词整站排名推广、SEO快速排名推广技巧。

网站排名推广平台

专注于网站排名推广优化SEO关键词快速排名优化关键词整站推广渠道

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

作者:jcmp      发布时间:2021-04-18      浏览量:0
【摘要】在设计和实现PC端网页时,我们通

【摘要】在设计和实现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这一类常见的间距分布。

1、栅格的计算方式:

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

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

3、由于a+i=A

4、可得(A*n)-i=W

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

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

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

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

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

5、我们是不一样的技术团队: