多设备兼容的烦恼
网页里面的select和option,这两个东西估计是在一开始出现网页的时候就已经有。周三的时候我发现option的hover效果是无论如何设置不了的,你可以设置option的颜色或者背景,但是hover上去没有效果。你也可以通过css设置select的hover或者focus。该怎么设置这个option呢?最后发现是无解的,所以我又研究了一下其他人的替代方案,有些很酷的网站,他们用js写了个脚本,在option的上面又覆盖了一层由li和span组成的东西,所以你看到的特效实际上是有那些产生的,而不是option本身。那个效果非常的炫酷,但是你要引入大量的js,也要引入大量的css。漂亮是要有代价的,这是显然的,本来我已经想好,要模仿其中一个,结果却突然想到它的下拉可能就只有几个选项,但我的下拉有可能有十几二十个选项。我选定的那种款式,默认没有滚动条,所以这该怎么办呢?所以我只能放弃。
周四当我搜索的时候,我又发现了一个英文网站里面用了纯css实现了option的hover,之所以可以做到这样,是因为他在select那里使用了onfocus之类的事件。为什么onfocus之后就可以设置option呢?之前option做不到的东西,加入了那些事件以后就变得可以做到了。接下来你就可以在option里面设置你想要的东西。本来我觉得自己有救了,之所以说本来,是因为后来我又发现了一些很无语的现实。
做的这个静态网站,我觉得受众大多数是用手机打开的。虽然可能他们准备资料的时候是在电脑旁,但是要查询资料的时候,估计他们不会先打开个电脑。所以这就意味着这个网站的开发我得兼容手机和PC。select和option的展示方式,不同浏览器不一样,手机和电脑不一样,不同的手机品牌也不一样。非常有可能在PC上的效果已经设置得如我所愿,但实际上到了手机上还是自动套用了手机经典的款式,所以等于做了个寂寞,与其这么大费周章,还不如直接放弃治疗。同一个手机,不同浏览器出来效果不一样;再换一个平板,虽然内核都是Chrome, 但实际上又会有差别。我不知道那些人是如何做到兼容这有一切的,起码对我来说这实在太难了。所以我只能尽量做到在不同的设备上效果都过得去。所以在选择字体大小上应该用什么样的比例,我又研究了一番。如果完全就只是一个PC的网页,设置好我想要的也就可以了,大概差不多也就那些字体大小,但是手机上看到的东西我感觉比PC上看到的小很多,于是我不得不把字体放大,但是放得太大,PC上就像一个搞笑的存在。以前body的font-size我都是用绝对像素。这一次我不得不采用相对单位。PC上点击用的是鼠标,图标再小,你都可以准确按到,但手机上你用的是手指,所以那个按钮必定不能太小。这些矛盾的东西,当你不是真的碰上的时候,是不会想象得出来的。
最后,我感觉大概差不多就那样了,剩下的事情就只是等待最终的数据源。