很多页面看起来简单，自己做起来才知道没那么容易。页面要多宽，字体要多大，许多细节问题，全都自己从头想也是蛮头痛的，效果也不一定令人满意。还是参考业界常规和主流做法比较好。即使要做打破常规的设计，也得先知道常规是什么，对吧？所以本文总结了一些网页设计中常用的规格数值。欢迎补充和提出意见。
另外，这个博客使用的主题是几个月前做的，那时候认识还没这么全面，所以这个主题的许多地方并不符合本文的描述。等有时间了我会大改一下。
页面宽度
有段时期我喜欢宽度自适应的液态布局（全屏布局），觉得现在的显示器都越来越大，两边都空着太浪费。后来又看了些这方面的文章，经过一些观察和思考，现在改变看法了。虽然屏幕越来越宽，但人的视野不能无限变宽，一行文字太长的话，眼睛来回扫视会很吃力。
综合考虑各种因素，页面最主要的内容部分，即正文宽度，以不超过650px为宜。
在800*600的显示器是主流时，主流页面宽度一般是770px或780px（这相差的10px来自于两边的空白边距，下同）；在1024*768的分辨率成为主流后，页面宽度一般是950px或960px。之后即使显示屏再大，页面宽度也最好不要再跟着扩大了。
最外围背景最好用自适应全屏宽度。这个是我杜撰的，不知道有没有专门的说法。什么意思呢？以 twitter.com/ 为例，用大分辨率，再缩小浏览器窗口查看一下。可以看到，页面主体部分是760px的固定宽度，居中，背景花纹和图案一直延伸到窗口两边，把窗口放大缩小，背景图案也随之放大缩小，主体部分不变。小屏幕的人使用起来不会感觉到有任何不同，大屏幕的人则可以看到更多的图案。
我认为这样既不会让两边屏幕空着浪费，又不会页面太宽造成使用上的困扰，同时固定宽度便于设计师掌控，让大屏和小屏的使用者都可获得较好的体验，是目前比较完美的处理方案。
字体大小（font-size）、行高（line-height）、间距（margin）等。
为了使文字布局工整简洁，方便阅读，字体大小、行高的设置等都有一定的讲究。以下基本是总结自Taobao.com UED Team的垂直栅格与渐进式行距(上)一文，可查看原文以了解详细原理。
方案1：
对于中文宋体来说，12px是能够清晰显示的最小字号。为了保证可读性，12px的1.5倍行距就是18px。同时12px/18px也是中文互联网上最常用的字号和行高。
- 正文：字体大小12px，行高18px，段前距（margin-top）0，段后距（margin-bottom）18px；
- h1：字体大小24px，行高36px，段前距9px，段后距9px；
- h2：字体大小18px，行高24px，段前距3px，段后距9px；
- 侧边栏文字：字体大小12px，行高18px，段后距18px；
- 侧边栏边框：边框（border）1px，填充（padding）8px（边框和填充的高度加起来等9px，即基础行高18px的一半即可，如边框2px的话，填充就用7px），上移9px（margin-top:-9px; 这是为了和正文的行对齐，因为边框和填充把侧边栏文字下压了9px，所以要上移9px对齐）。
方案2：
如果嫌12px字太小，想调整得大一点，可以用14px的正文，其他数值相应调整。
- 正文：字体大小14px，行高24px，段后距24px；
- h1：字体大小24px，行高24px，段前距24px，段后距24px；
- h2：字体大小18px，行高24px，段前距12px，段后距12px；
- 侧边栏文字：字体大小12px，行高24px，段后距24px；
- 侧边栏边框：边框（border）1px，填充（padding）11px（边框和填充的高度加起来等12px，即基础行高24px的一半即可），上移12px。
本文作者：Betty | 本文地址: https://myfairland.net/common-figures-for-webpage-layout/
本站文章除特殊标明者外均为原创，版权所有，如需转载，请以超链接形式注明作者和原始出处及本声明
正好准备修改一个新主题，可以参照这个来试试。话说betty前面的几篇日志，看得我都不知道说什么好……我的理解、意识还不够处理那些信息的……
这个有点意思
这个确实不错
我那主题我用960px，字体嘛，反正最小是9pt——和你说的一样照顾宋体，其它我都忘了……因为设计时没具体规划……
前端的字体布局确实是一门大学问，如果连这个基本的都做不好，设计已经失败了一半
fix和liquid在几年前1024慢慢成为主流的时候有过大争议，结果fix成为主流。正文不宜过宽是对的，liquid设计同样也讲究限制正文宽度。liquid落败的真正的原因是fix的可控性高，以及1024宽度已经足以满足需求。
过宽的空间给设计带来更大的挑战，至少目前来看，web2.0还没有对分辨率提出更高的要求。
@浆糊:
国外液态布局还是比较流行的吧，只是国内没什么人用
google服务全部不能上了，害得我做不了事。翻墙又太慢。
还是别翻成液态吧，怎么看怎么别扭，让我想起终结者。还是自适应布局比较舒服。
我说的争议就是在国外发生的，基本上现在都是fix居多，有很多用背景图片做出整体感，比较具有欺骗性。
@浆糊:
Google改Hosts文件就能上了
自适应布局的说法也有歧义，还是叫全屏布局吧，呵呵
我现在很喜欢全屏背景+主体固定宽度的布局
文字排版的时候 em 比 px 更合适。固定页宽其实能避免则避免，如果页面太宽，读者应该在浏览器层次调节。taobao的文章未必好，我还是建议你看 http://www.w3.org/Provider/Style/
@Colin:
我在实践中感觉em排版一点都不好，改一下字的大小，整个排版都会跟着变，很烦人啊。
w3c的东西是技术标准，我这里写的是实践中感觉比较好的经验数据，不是一个层面的东西吧。
一样比例的变不是很好吗？像素过于technology dependent。1920×1080（以后会更大）显示器，和480×640的PDA屏幕，便无法兼顾。比如在我现在用的屏幕上，12px非常小，我的浏览器默认字体（20）被这样的页面无视。视力不好的读者也会把浏览器默认字体设大。此外一些手机设备和系统仍然在用位图字体，这时如果缺少一个特定像素的字体（比如14px），浏览器会用接近的（比如15px）代替，混乱网页的排版。w3的 style guide 是一些建议而已，http://www.w3.org/Provider/Style/DeviceIndependent.html 和 http://www.w3.org/TR/WCAG10-CSS-TECHS/#units 说的都是一个意思：accessibility和对读者选择的尊重。我写了这么多，也是因为觉得你的页面设计很用心很执着，赞一下，也提提建议。
@Colin:
我觉得没有必要把布局和字体大小绑定在一起。
现代浏览器都能缩放页面，效果比用em好。
我这篇是针对电脑的，考虑手机浏览的话最好是设计专门的样式，常用CMS一般都有针对手机浏览的插件和主题。（但是我比较懒，没用……）
总之，em在几年前是很流行的，我觉得现在已经过时了。
感谢你的建议。其实我对现在这个主题很不满意，但是一直懒得改……
又可以改改css了