终于有时间了,周末闲下来,将博客的前端代码又重构了一版,说是重构,其实就是改改 CSS,将原先一些图片做的效果改用渐变等东西做了。界面基本没有大的变化,下面就是这次改变的一些心得

新技术的一些应用
响应式设计(Responsive Web Design,简称 RWD)

这次就是完善了响应式布局的一些 CSS,之前只是使用了 Media Queries,而没有使用 viewport 来进行定义,这次添加了 viewport,使页面支持移动端的设备而无需做服务器端的识别。我自己觉得 RWD 并不是一定要使用固定布局或者流式布局等,而是在一份代码中可以根据条件 (设备宽度) 对布局进行切换,已达到适应各种设备屏幕的效果。例如当前页面,是固定的两列布局,但是在页面宽度缩小一定的时候就会转换为一侧固定,一侧自适应的流式布局。再缩小的话就会转换为单列布局。

渐变的使用

这次渐变主要还是在移动端的使用,在做 Media Queries 后,检测为移动设备时就会使用重新设置background-image为渐变,一是为了减少数据量,而是使用渐变对 Retina 的支持更好。渐变在生成中,自己偷了个懒,直接使用在线的工具。( 工具链接在文末 ),另外一个渐变的使用就是在 button 的生成上面。也是使用的在线工具。

图片对 Retina 的支持

其实是为了移动端越来越高的 dpi,而做的支持,因为移动端的高 dpi 下,一般图片给人都有一种模糊的感觉,体验比较差,这次就专门对一些 CSS 中的图片做了优化,这个思路来自于在手机端访问 QQ 空间时发现他们对 Retina 做了优化,所以自己也就改了 Chrome 的 UA,直接查看了源码 ( 赞一下 Chrome 的开发者工具对更改 UA,分辨率的支持,越来越强大了 :good: ),发现就是一条语句 -webkit-background-size:77px auto;,这是改变背景图片的尺寸,所以做法就是:做出二倍大小的图片(例:154px ×60px),然后使用 background-image 设置背景,再使用 -webkit-background-size:77px auto; 就可以在 77px 的显示区域来显示 154px 宽的背景图了。

Fontface 使用

这个应用主要是自己在看了 Google 的 Open Sans 字体后,感觉设计的很好,所以也是一个尝试吧,就在自己的博客上面使用了(具体方法见文末)。

做 manifest 缓存

因为移动设备的原因,这次也使用 manifest 对页面一些静态元素,如图片,JS代码,CSS 代码,Font 文件做了缓存,使用 Chrome 等浏览器将会对速度有一定提升,在使用过程中主要遇到的麻烦就是浏览器也会缓存调用 manifest 的动态页,解决的办法就是套用 iframe 框,这个方法不是最优的解法。这部分主要参考了 Sofish Lin 的文章(链接见文末)。

对打印设备的优化

对打印设备优化完全是在做了 RWD 后的顺手活,因为也没有人会来打印我的博客吧。在打印设备中主要就是使用 CSS 对链接的直接显示了 :)

这次的几个新技术的应用,受益最大的就是移动设备了,同样对于 IE 等较老的浏览器来说也没有什么布局影响,因为渐变和对 Retina 的支持都在 Media Queries 里面使用的,所以不会有影响,而 manifest 更是向下兼容,并且我自己使用了 iframe 框,所以这次这几个较新的技术都可以在传统网页上面来使用。

这次改版的最大收获可能就是设计上面的减法吧。尤其是在做对移动设备支持时候,纠结于哪个模块的删除,最后还是只保留了主文章的区域,侧边栏也没有做主流的下移,而是直接 "display:none" 了,还有次标题也是不让显示,文章页中的评论做了 ajax,只是在需要的时候可以通过脚本拉取出来,在侧边栏和评论的代码中使用了服务器端对设备做判断,从而做到少输出 HTML 结构的代码。移动设备的判断是使用 "WordPress Mobile Theme" 这个插件中的 php 类直接实现的(基于 MIT 协议)。 拉回来再说设计的减法,还有在打印设备中只是保留了著文章区,其他的 Header,Footer 和侧边栏,评论等等通通去掉了,去掉固定的布局,改为流式布局。再说说布局吧,这次的重构对现在面试中的一侧固定宽度,另一侧自适应的这种布局题有了更深刻的认识了,其实就是考察自适应设备的解决方案。自己觉得就是对 margin 负值的应用吧。

推荐工具
扩展资料