SEO > 新闻资讯 > 网页设计 > 基本网页设计中的尺寸选择

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

分类:网页设计作者:小邱 发布时间:2019-12-25 14:03:48访问人数:
本文标签: 网页设计网站设计网站网页制作

  在设计和实现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列,宽度为300px,间距为20px

  使用网格系统可以有效地提高网页的标准化程度。在网格系统下,页面中元素的大小具有相同的基线和规则。而基于网格系统的设计可以使整个网站的布局与每个页面保持一致,增强页面的统一性,提高用户体验。

  • 项目经理.png

    扫描添加

    项目经理微信

    享受专业顾问服务

  • 微信公众号.jpg

    关注公众号

    获取更多专业资讯

  • 已赞(0)
    分享:

    版权:【注明为本站原创的文章,转载请注明出处与原文地址!本站部分转载文章能找到原作者的我们都会注明,若文章涉及版权请发至邮箱:[email protected],我们以便及时处理,可支付稿费。向本站投稿或需要本站向贵司网站定期免费投稿请加QQ:1175062249】 更多信息请关注微信:1175062249

    本文关键词:网页设计,网页设计尺寸,网站设计,网页制作,网站
    阿里云服务器
    SEO按天计费
    域名注册
    网站建设
    君创网络启动新征程

    Copyright © 2013-2020 昆明君创网络科技有限公司 版权所有 滇ICP备19009793号-1 beianico.png滇公网安备 53011102001061号

  • QQ
  • 电话
  • 首页
  • 留言
  • 返回顶部