图片自适应 & CSS 压缩
06192007 / No Comment / 建站笔记
今天就为了折腾我那个小小的 Men’s | Ben Inside 果真是累得我傻了, 不过还好, 还算有那么点点成果, 可以在这里公布公布.. 嘿嘿~~~
1. 图片自适应
Men’s | Ben Inside 可不是一般的大. 默认的小 div 怎么塞都塞不下去. 难道我注定要用 “width=100%” 来 define 每张图片?! 不会吧…. 万一我换了个超宽的风格那不就… #(%Y&@(#&$!@
我记得我在换模板的时候看到 “WordPress Deault Theme” 的图片竟然自动缩小了! 可恶! 赶快跑它 CSS 认真看一看: 有那么一行代码 “max-height:100%”. 妈呀, 原来我们伟大的 CSS 本身就支持图片自适应的啊?! 乐得我… 嘿嘿~~~~ 赶快加上. 满意地笑了. 只可惜好景不长, 我用 IE 不小心看了一下: 变形了. 赶快赶快 google: max-height ie. 很多结果吧? 原来 Realazy 老大已经有了教程的啊?! 不长眼的小benben, 唉…. 不过我当时看到的是另外一个网站: CSS minimum and maximum sizes. 只要加入小小的一段代码 IE 就乖乖地执行命令了. 乐~~~~~~~ ^_^
2. CSS 压缩
完成了图片自适应之后我就去闲逛了很久, 然后再去看一些关于压缩跟优化的文章. 其中有一个提到了 CSS 的优化. 其实我觉得 CSS 本来就小, 没事干干嘛优化它? 我主页优化就好了啊…. 谁知道 Zhang-Zi 更强, 整个主页下来只有 14k, 包 CSS 跟 JS. 我就赶忙跑回 Men’s | Ben Inside 试去了. 大家也可以自己去看看. 原来的 CSS 体重为 10.04 KB (10,285 bytes), 减肥后体重只有 2.48 KB (2,544 bytes). 怎样, 心动了吧? 心动不如行动, 赶快去帮你 CSS 减减肥吧! 我自己都吓了一跳! 看来以后我的 Men’s | Ben Inside 可以嗖嗖嗖地快了~~~~ ^_^ 春心荡漾中~~~
i.am.Ben的总结:
- “max-*” 在 CSS 2 中得以支持, 不过由于浏览器标准问题, 暂时只有 FireFox 跟 Opera 支持, 如果想要让 IE 等浏览器也支持的话可以参照 CSS minimum and maximum sizes(个人认为最佳) 或者 Realazy(提供了三种方法) 的来设置.
- 网页的优化是哪个部分都不可以被忽视的, 即使只有小小一丁点的 CSS 其优化潜能也是巨大的. 做好每一个优化, 使用户体验得以最大化.
- 使用 Gzip 优化时不要太过盲目, 也要注意一下服务器的负载能力.
