网站界面重构

dimlau ≈ 阅读 3 分钟

之前的网站界面风格用了好几年,是一种类似 Medium 的设计,挺整洁的,我个人也很喜欢。但是那套f风格到了很重的 CSS 框架,好处是不管页面里想放进去点什么,都能有对应的设计预设,保证可以比较优雅地展示。但是同时坏处就是,个人站点怎么会用到那么多结构呢?于是一直想着重新设计。

从想法,到实施,再到真正落实出来,前后跨度也差不多两年了吧……现在至少……勉强上线了。后续还会修修补补。之前的风格,一张图片预览作为存档吧:

旧的界面风格

新的设计抛弃了框架,用到什么就写进去什么,所以 CSS 文件大小直接缩小了 4 倍左右——第一行是新的 CSS 文件,第二行是旧的。

CSS 大小对比

而且借着这次重构的机会,把原来的布局方式也抛弃了,直接用到了 flex 和 grid 布局。不过问题是浏览器的兼容性可能就比较差了。但是我决定不再做向下兼容。所以全部使用的标准 CSS 属性,诸如 -webkit- 或者 -ms- 之类的针对特定浏览器的前缀全都没用。

首页做了几个宽高都是 100% 的内容区块,用到了 flex 布局,局部伸缩,还蛮有意思;文章页面的下面,罗列相关文章时用到了 grid 网格布局,自动调整行列元素,也挺有趣。但是我这个咖啡师知道这些干嘛呢,哈哈。

本来,还做了一个页面加载完成之前的 preload 动画,但是不知从什么时候开始,我的这个 kaix.in 域名就被微信加入了黑名单,每次访问都会出现跳转页,进入一个不支持 JS 的页面,而且经测试,所有的页面元素只要是 CSS 中设置了 position 属性,全都被屏蔽掉了!

当然我可以全然不顾页面在微信里的显示效果,但是效果是一回事,页面能不能展示出来是另一回事。目前没有找到合适的方法做到兼顾,所以暂时把预加载动画以及 CSS 的异步加载都搁置起来了。幸好页面本身都比较小,所以加载倒不至于很慢。

最后,作为一个强迫症,之前的风格,查看源代码时,可以看到一坨去掉空格的源码;新的,为了不一样……尽量做到了严格缩进。真是毫无用处的变化呢,笑……

打赏 写信

#站点记录

延伸阅读

本站架设于 RamNode VPS