[翻译]构建响应式布局

最近看了Zoe Mickley Gillenwater在2012年响应式设计峰会里面演讲PPT,里面谈到响应式设计的两个核心部分:流式布局和Media Queries。后面还有介绍如何解决在iOS横纵屏切换时产生的问题,和解决IE8甚至跟早版本的media query问题。

尝试翻译了一下,第一次做翻译,功底不深,如有地方错误或者翻译的不好,跪求指出批评。

翻译:构建响应式布局

原版:Building-Responsive-Layouts

CSS3 小工具

通过CSS 3可以创作很多有趣并且很华丽的效果,之前可能要通过JS来实现,现在通过CSS 3就可以做到,甚至做的更好,代码更少更简单。

如果要说它的缺点,那就要说兼容性了。其实兼容性并不是CSS 3自身的缺点,只是低版本的IE浏览器不支持,而偏偏这种低级浏览器却占了一大块的市场份额。严重阻碍了CSS 3的发展。不过现在也是有越来越多的人开始拥抱HTML 5和CSS 3,前卫的浏览器也不断升级来支持更多HTML 5和CSS 3的特性。同时很多JS框架和插件也开始渐渐的不支持低级浏览器(比如jQuery2.0 直接放弃对IE 6/7/8 的支持)

在之前学习的过程发现有时要调一个效果,特别是微调的时候,需要一直反复的修改,保存,再刷新页面,这样很费时间。而且也有很多参数要输入,比如设置阴影的时候,就需要传入6个参数(X轴位移,Y轴位移,模糊程度,阴影扩散,颜色,是否为内阴影效果),设置起来本来就稍微麻烦,更不用说如果要设置多层阴影。

如果能有一个直观的,在线直接调节就可以马上看得效果,而且还有代码直接复制应用(或者是参考学习)的工具,那会不会更好?同时,即得效果也可以帮助初学者(像我这样)更加方便生动直观的了解CSS 3,直接通过这个工具体会效果变化,而当中又可以细心体会代码的变化,而不是一开始就对着要输入一大堆糟糕的参数的代码来看。

所以就尝试做了这个CSS 3的工具,当中的功能是一些比较基本,而又需要及时看到效果的。

工具:http://xiemin.me/resources/css3-tool/boxShadow.html

如果有什么更好的建议,可以联系我。邮箱是:[email protected]

最后要感谢eyecon.ro制作了一个如此好用方便的Color Picker。感谢twitter提供了一个如此强大的框架bootstrap

博客

博客停了一段时间,因为空间的问题,以前的数据也没有了。

想想这段时间,从找到第一份工作,再到毕业,再到现在,一晃就是7个月。当中发生了很多趣事,当然少不了一些令人醒悟的事。

以前总觉得日子过得很慢,很想快点过。但随着不同阶段,日子是过的越来越快,让自己有点无法相信,或者说惊慌失措。在大学,眨一眼就是一年,而在工作,眼还没有准备眨,就已经过了7个月了。

我热爱这份工作,准确的说是我热爱这份事业,我很幸运,因为我找到了。或许这也是时间过得快的原因,因为我很享受它,享受它所有的一切。

我相信这些点点滴滴有联系的,只是在现在无法预见,而在未来回头看的时候,这一切将会如此的美妙,因为这些事物都将串联了起来。

你不可能充满预见地将生命的点滴串联起来;只有在你回头看的时候,你才会发现这些点点滴滴之间的联系。

–史蒂夫·乔布斯