刚才忽然想调整一下我的Wordpress博客的宽度，发现一般都是在style.css这个CSS文件中调整的，其位置位于你所安装的主题下面，如：本博客的在wp-content/themes/blocks2/style.css这里（如果是默认的主题则是default/style.css）。
根据Google Analytics的统计，访问我网站的客户端屏幕分辨率前十名分别如下：
| Order | Screen Resolution | Visits | Contribution to total |
|---|---|---|---|
| 1. |  1440x900 |
744 | 21.82% |
| 2. | 1366x768 |
720 | 21.12% |
| 3. | 1280x800 |
451 | 13.23% |
| 4. | 1280x1024 |
275 | 8.07% |
| 5. | 1920x1080 |
223 | 6.54% |
| 6. | 1680x1050 |
213 | 6.25% |
| 7. | 1024x768 |
187 | 5.49% |
| 8. | 1600x900 |
133 | 3.90% |
| 9. | 1920x1200 |
61 | 1.79% |
| 10. | 1360x768 |
35 | 1.03% |
前十名中都没有屏幕分辨率的宽度在1024像素之下的，根据更详细的数据看出，宽度在1024像素之下的仅占不到1%的，所以为了我的99%以上读者的体验提高，我将此博客的显示总宽度调整为1000像素。
我调整了如下几个地方，当然，不同主题的style可能对应不同的代码段，如下仅供参考。
总体布局的宽度：1000 Pixels
|
1 2 3 4 5 6 7 8 9 10 11 |
/* layout START */ #wrap { text-align:left; margin:0 auto; width:1000px; } #container { background:#D6D6D6; padding:0 3px 3px; } /* layout END */ |
主体部分的博客文章显示的宽度：710 Pixels
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
/* main START */ #main { width:710px; margin:10px 0 0; float:left; overflow:hidden; } .post .title { background:#F1F5F6; padding:5px 10px 3px 15px; color:#258; } .post .title a:hover { color:#333; text-decoration:none; } .post .meta { background:#F1F5F6; padding:0 10px 5px 15px; } .post .meta .info { font-size:10px; float:left; } .post .meta .comments { font-size:10px; float:right; } .post .tags { font-size:10px; margin-bottom:10px; } .post .content { line-height:145%; padding:10px 0 10px 15px; overflow:hidden; } .post .content h4 { font-size:14px; margin-bottom:8px; color:#60743A; } .post .content img { max- :600px; } .post .content p { margin-bottom:8px; } .post .content ul, .post .content ol { padding-bottom:10px; } .post .content ul li, .post .content ol li { list-style-position:inside; padding-left:20px; } .post .content table { border-collapse:collapse; background:#FFF; margin:5px 0 10px; border:2px solid #E1E7E9; } .post .content table tr td, .post .content table tr th { border-left:1px dotted #FFF; border-right:1px dotted #FFF; border-bottom:1px solid #FFF; text-align:left; vertical-align:middle; padding:5px 10px; } .post .content table tr td { background:#F1F5F6; } .post .content table tr th { background:#E1E7E9; } #pagenavi, #postnavi { background:#F6F9E7; padding:1px 10px 1px 15px; font-size:10px; margin-bottom:10px; } #commentnavi { background:#F6F9E7; padding:6px 10px 6px 15px; font-size:10px; } #postnavi, #commentnavi { margin-bottom:10px; } #pagenavi span, #postnavi span, #commentnavi span { margin:-1px 0; } #pagenavi span a, #postnavi span a, #commentnavi span a { display:block; text-decoration:none; padding:5px 10px; } #pagenavi span a:hover, #postnavi span a:hover, #commentnavi span a:hover { background:#ECF3D3; } /* main END */ |
侧边栏的宽度：270 Pixels
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
/* sidebar START */ #sidebar { width:270px; margin:10px 0 0; float:right; overflow:hidden; } .widget { background:#F1F5F6; margin-bottom:10px; padding:0 10px 5px; } .widget h3 { background:#E1E7E9; margin:0 -10px; padding:5px 10px; font-size:11px; border-bottom:1px solid #FFF; } .widget ul { margin:0 -5px; } .widget li { list-style:none; padding:3px 5px; border-bottom:1px solid #E1E7E9; line-height:18px; } .widget div.itembox { padding: 5px 0 0; } .widget li ul { padding-right:0; margin-left:10px; } .widget li li { padding:3px 5px 0; border-top:1px solid #E1E7E9; border-bottom:none; margin-top:3px; } /* sidebar END */ |