新的风格终于做完了

dimlau

有一段时间,我打开任何网页时都会神经质滴缩放一下浏览器窗口看看页面在不同窗口大小时的显示状况,对响应式网页设计十分着迷。

由于现在的网页设计,尤其是个人 blog 的设计,越来越以简洁为美。所以单独为小屏幕尺寸的移动终端设计界面完全没有必要,在 blog 这个领域里,响应式设计应该是再合适不过了。

说到这里,或许应该解释一下什么是响应式设计,响应式设计(Responsive Web design)简单说起来就是同一个页面对不同设备可以显示特定的样式。也就是比如你用手机访问这篇文章,因为手机的屏幕要比电脑显示器小很多,页面的样式会针对小屏幕自动做一些调整。动手试一下就知道了。或者,简单缩放一下浏览器窗口的大小也可以看到变化。

所以,这就是这次新风格的主要特性了,除此之外:

  1. 去掉了 reset.css ;
    我觉得对于页面结构不是那么复杂的 blog 来说, reset.css 起不到多大的作用,能用得到的也就是一些常见的元素比如 之类的要 margin:0; 一下而已。为此单独写一份 reset.css 太大题小做了。

  2. 尝试用 LESS 写 CSS ;
    LESS 用起来感觉的确是快捷不少,因为这次在页面里用了好几种颜色,这几种颜色之间又都有一定的关联,所以用 LESS 的变量,改一个基础的颜色,其他颜色都会自动通过计算获得,所以省事不少。

  3. 因为尝试着玩 LESS 的变量去了,所以页面配色没有怎么考虑,用了太多的颜色有点杂乱了。
    哈哈,本来想法是不同分类的日志用不同的颜色去表现,但是实际放到一个列表页面里的时候颜色一多就乱了,当然这个是和页面布局有关的,布局没弄好就算颜色少几种也整洁不起来。我稍后再调吧。

  4. 调大了页面字体。
    屏幕分辨率越来越高,12px 的字体在 27 寸的高分辨率显示屏上显示是什么状态?因为我现在屏幕没那么大,不得而知。不过我觉得是到了调大字体的时候了吧。但是问题就是以前没这么搞过,调大了字体之后让本来就已经凌乱的页面更乱了,好吧,也是以后再调。

  5. 最后一条,把页面里的 Google Adsense 广告拿掉了。
    不光赚不到钱,还让看客们觉得碍眼,而且很多人应该都装了 ADblock 之类的浏览器插件吧。罢了罢了,拿掉了。

就是这样。虽然了却一个心愿,但是这次做的风格自己还有很多地方不满意。甚至这都算不上什么风格吧。和 CSS 裸体日(CSS Nake’s Day)时的效果应该差不多。顺便说一句,页面四周的边框用了 position:fixed; IE6 不支持这个属性,你们懂的。反正我也没在 IE 浏览器里测试过显示效果……

延伸阅读

本站架设在 RamNode VPS

Grav -> Hugo