一、问题缘起
我有个自用的主页。以前是在17英寸显示器的电脑前设计的,所以以1024像素为标准宽度。
后来,电脑是宽屏的了。尽管,页面是居中布局,在宽屏下没有什么不良效果。但是,由于这个主页上的网页大多是些长文档,基于对移动滚动条的不喜欢,我想把正文的宽度稍微增加一些。(原来是570/680像素(第一个宽度值是两栏的,第二个是三栏的)——不含padding,看似挺宽的了,但用16像素的字体,其实也就是每行33/42个字而已)
以前就到禅意花园看过,对样式切换印象很深。
二、切换样式表的方法
现在的任务是:在宽屏的情况下,如何让正文区的宽度稍微大一些。
我想到的思路是:使用两套样式表。在不同的屏幕下可以切换样式。
于是,到禅意花园去看看它是怎么实现的。在它的FAQ页面中找到了这篇文章。
文章说得有些不够明了。整理如下(记录维护操作是个好习惯):
1、新建一个新的样式表文件。
2、在空间建了一个JS文件。文件中的代码不需要作任何的修改。
3、在页头加上如下的代码:
<link rel="stylesheet" type="text/css" href="/css_1280.css" title="1280" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="/css.css" title="1024" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="/css_1280.css" title="1280" media="screen" />
<script type="text/javascript" src="/css_switcher.js"></script>
第一段代码是指定默认的样式表,第二和第三段是列出候选的样式表,第四段是指定所调用的JS文件的路径。
4、然后是在页面的某个地方(比如边栏)放置切换样式表的链接:
<a href="#" title="1024像素,17英寸" onclick="setActiveStyleSheet('1024'); return false;">切换到普通屏幕</a><br />
<a href="#" title="大于1280像素的宽屏显示器" onclick="setActiveStyleSheet('1280'); return false;">切换到宽屏</a>
这一步的关键是这段JS代码的title(不是超链接的title)要跟头部代码的title一致,而CSS文件的文件名是什么是不相关的。
三、其它
1、流动布局?
实现不同的宽度有另外一个方法,就是采用“流动布局”,不过这个主题是用了固定宽度,流动不起来。
现在这个方案有个另外的好处:可以让不同的样式、风格应用到一个站点上。有时候,几个主题(风格)各有各的好,还难以取舍,这个时候,用这种切换方法就解决了。
2、宽度的增加值
在编写用于宽屏的样式表文件的时候,思路错了。
原来的做法是:
为正文区(中栏)增加(1280-1024=)156像素。
大家知道错在哪里吗?
错在:要用页面的实际宽度而不是显示器屏幕的宽度来计算。
所以,正确的做法是:
正文区(中栏)增加(1220-960=)260像素。(1220是宽屏的页面宽度值,960是1024像素普屏的页面宽度值)
3、
发现 FCKEditor 自动把代码中的尖括号(或小于号、大于号)转换成HTML实体的。而一般的富文本编辑器是不能这样的,于是就会出错。