更改blog的页面宽度为960像素

2010年01月07日 - 11 条留言 - 心情杂记 - 浏览:4,369 | 大小:小中大 | 繁體 | English | Short URL：http://bit.ly/diyhIq

前言：目前blog使用的主题是PureCSS 2.7 作者为 Creadr*。原始作者的网站已经打不开了，不过我爱水煮鱼那边还可以看到：http://fairyfish.net/2008/08/13/purecss-theme/，原始的主题是纯CSS的，没有使用任何一张图片。后来我自己修改了评论的部分，外加修改了CSS的部分地方。改东改西的已经没有原始的主题那么简洁了。

为啥要修改页面宽度？

原来的PureCSS主题使用的页面宽度是770像素，这是为了照顾使用800X600的访客，也就是以前CRT显示器15寸的用户。但是随着LCD的出现，显示器荧幕的变大，分辨率的上升。估计现在还是用15寸CRT显示的用户已经很少了。
在月光博客上也看到：现在的网页设计的行业标准应该就是960像素宽度，目前绝大多数门户网站和大型网站都使用960像素左右的分辨率。我特地跑了趟新浪网、搜狐等，发现的确如此。
Google Analytics的统计图表中，也看不到800X600的分辨率了。（如下图）

Google Analytics统计的用户分辨率比例

如何划分左右栏的宽度？

思前想后，决定把左边栏宽度调整为730像素，右边栏的宽度调整为202像素。其他部分留空补白。这样作为用来显示文章的左边栏就有了足够的宽度。嘿嘿。

默认字体大小修改了？

是的，原来的12像素的字体虽然精致，可惜并不太适合用来当阅读的字体，看久了眼睛会很酸。所以这次就把字体调大一些。具体调成多少呢？第一个念头是16像素。但是测试了一下，发现16像素虽然字够大了，但是因为眼睛得频繁移动反而觉得不太舒服，所以就下调为14像素。测试了一下，发现还不错。现在，我的默认字体设置为：

font:14px/150% Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;

文章的最后：

调整好了之后，测试没啥问题，于是就更新了。所以当您看到这篇日志的时候，我的blog的页面宽度已经是960像素了。而这个日志的主体部分的宽度更是达到730像素哦。字体也大了许多。是不是看起来会更舒服一点呢？至于美观，抱歉，炜煜我不是设计师，没办法兼顾，希望原始作者原谅我对他的主题的胡乱修改。

文章结尾放上CentOS5下GNOME桌面中的Firefox浏览效果图：

本文作者：施炜煜

文章原始网址：http://firefore.com/2010/01/width-960px.html

标签： CSS, html, PureCSS, WordPress

分享到：

本文作者：施炜煜
原文链接：http://firefore.com/2010/01/width-960px.html
发布于：2010年01月7号最后修订在：2010年06月24号
版权声明:转载时请以超链接形式标明文章原始出处和作者信息。

相关日志随机文章最新文章留言排行

读过这篇日志的读者同时也读了：

>欢迎您的来访。喜欢这篇文章么? 发表一下您的看法好让我们能交流交流一下。
>建议您订阅这里的RSS，这样您及时地获取更多精彩内容!
>Permalink：http://firefore.com/2010/01/width-960px.html
>Trackback Address：http://firefore.com/2010/01/width-960px.html/trackback

11 Responses to “更改blog的页面宽度为960像素”

1. CLURIES | 2010年01月8号 at 10:38 | #

不错，变宽了是要好看些了
回复该留言
- 2. 炜煜 | 2010年01月11号 at 18:35 | #
  
  ^^
  回复该留言
3. shamas | 2010年01月8号 at 11:04 | #

字体设置的很好，我也喜欢大字体。我的还是默认主题的宽度，等什么时候也换下成960的
回复该留言
- 4. 炜煜 | 2010年01月11号 at 18:36 | #
  
  你的也不錯啊。你的淘寶客內容真充實。
  回复该留言
  - 5. shamas | 2010年01月11号 at 18:38 | #
    
    有个淘客站空间商差点挂了唉,现在正移往香港机房
    回复该留言
6. 虫儿 | 2010年01月11号 at 15:52 | #

我觉得这模板挺美的。
回复该留言
- 7. 炜煜 | 2010年01月11号 at 18:37 | #
  
  謝謝蟲兒哥~~~特喜歡您的blog
  回复该留言
8. cynthiayeung | 2010年04月4号 at 11:30 | #

其实现在电脑城的显示器几乎都是宽屏的了，但国内的网站的页面宽度却仍停留在990-1002像素之间，再加上插广告，显得页面可读性非常差。两边的空位都浪费了。
回复该留言
- 9. 炜煜 | 2010年04月6号 at 09:37 | #
  
  我本来最初的想法是页面宽度用百分比的。下次试试看。
  回复该留言
10. lzlh | 2010年05月4号 at 17:40 | #

请教，如何改左边栏和右边栏的宽度啊，每个不同的主题更改方法都一样吗？
回复该留言
- 11. 炜煜 | 2010年05月7号 at 09:29 | #
  
  可能不同哦。像我的这个主题，是DIV+CSS的。因为有个总的DIV和左右两边的DIV。所以我只需要设定总的宽度，再调整左右两个DIV的宽度即可。
  回复该留言