网页设计尺寸规范及标准详解
1. 屏幕分辨率宽度
我们只看 PC 端，根据现在屏幕大小的分布统计（下图为百度流量研究院最新数据）
网站建设过程中绝大多数屏幕的分辨率已经超过 1366*768，这是个屏幕逐渐变大的趋势，几年前我们还需要考虑在 1024* 768 这个非常普遍的分辨率下的显示效果，现在基本上不需要单独对其做处理了。
这个分辨率值只是上限参考，你不可能把页面的实际显示内容区（或者叫安全区）搞到这个值，因为在 Windows 等部分浏览器上，滚动条等也要占据宽度，同时过分的贴边在设计上是不被推荐的。
理解了这个我们就能清楚的知道一个基准值的参考范围。
2. 栅格与响应式设计
这里需要理解一个概念，通常为了布局方便我们将内容区域划分为12或者24格，并在栅格间增加通用间距来处理绝大多数情况下的垂直排列问题，12或24的好处是能够被2、3、4整除，更方便来处理2：1，1：2：1等常见间距。
计算方式（我这里常见的是处理企业级的设计页面）
到这里基本上就知道为什么我们常见的值会是1180（1200减去两边栅格的留白）。这个值叫做典型设计参照，以往的设计平面稿是没办法动态适配各种宽度的，用典型值来作为设计稿基准尺寸能够表达典型效果，并在页面实现时更容易还原。
响应式布局是最近几年比较流行的概念，在网页渲染时，能够根据视窗宽度自动对 Layout 及页面元素进行重新排列。比较常见的 Bootstrap 响应式部分的介绍：
以及栅格部分的详细描述：
下面这张图给出了 Bootstrap 的常见屏幕状态下的几个典型值：
关于网页字体大小等问题，也可以参考上面比较经典的设计规范约定。常见的内容段落文字大小约定为 14px。我这边在做的规范，关于排版的约定如下：
推荐新闻
更多新闻-
如何提升网站建设团队的队伍协作性？
Team是指一个团队，网站项目并不是一个人单独就可以完成的，而是由...
2020-01-07 -
photoshop主要应用哪些领域都能做什么
Photoshop CS5主要应用于与电脑美术相关的行业，如平面设计、...
2015-11-30 -
网络营销之博客学问之营销策划篇
网络营销之博客学问之营销策划篇我的爱好非常广泛，有很强的求知欲，那种渴...
2011-12-24 -
专业网站建设的品牌定位
专业网站建设尚品中国解析：网站运营经验人员应该都很清楚，网站运营关键在...
2015-05-04 -
企业网站建设中的图片应该如何选择？
随着生活水平的提高，大屏时代的到来。高质量的背景图片对于提高整个网站大...
2018-06-11 -
浅谈营销设计型网站和推广相关知识要点
浅谈营销设计型网站和推广相关知识要点 对于当下网络的飞速发展，要想...
2018-08-06
关于我们
扫一扫关注尚品最新动态
2008年尚品中国成立于北京，尚品创立至今共为3000多客户成功完成任务，并上线使用。
我们专注高端网站建设，网站制作，品牌网站设计，集群建站、业务系统开发，APP开发，SEO优化等业务，为用户提供一站式解决方案，并且为用户获取更多用户流量，达到用户理想的业绩指标。
-
北京总部010-60259772
地址：中国 · 北京市大兴区西红门兴创国际中心A座501
-
天津公司022-58793660
地址：中国 · 天津市河西区国际贸易中心C座3614
尚品专注高端网站建设，系统平台开发，APP开发，SEO优化服务
免责声明
非常感谢您访问我们的网站。在您使用本网站之前，请您仔细阅读本声明的所有条款。
1、本站部分内容来源自网络，涉及到的部分文章和图片版权属于原作者，本站转载仅供大家学习和交流，切勿用于任何商业活动。
2、本站不承担用户因使用这些资源对自己和他人造成任何形式的损失或伤害。
3、本声明未涉及的问题参见国家有关法律法规，当本声明与国家法律法规冲突时，以国家法律法规为准。
4、如果侵害了您的合法权益，请您及时与我们,我们会在第一时间删除相关内容!
联系方式：010-60255689
电子邮件：394588593@qq.com
