瀑布流主要应用在图片展示页面上。如果有一大批图片需要展示，原始图片尺寸不一致，又希望每张图片都能不剪裁，完整显示，那么就要给图片规定一个宽度，解放它们的高度。利用网页高度不限这个特性，充分利用页面的空间，尽可能的展示多的图片。瀑布流的实现方法挺多，但能做到响应式列数变化，自由布局的并不多。这次自己开发了一个作品集页面，正好研究一下响应式瀑布流的实现方法。
1. 响应式多列：960px宽以上呈4列，750-960呈3列，400-750呈2列，400宽以下变成1列；
2. 由于需要做响应式，那么每块的宽度就不固定，导致高度更加不可能固定。后端输出的时候，图片（块）的高度本来就是未知的，要用JS实时取到它们的高度，以便调整布局。
3. 异步加载：页面拖到最低端的时候加载更多，这个很常见。 查看详细
CSS3的Media Queries（媒体查询）在现在的网站开发中已经被应用得越来越频繁，现在但凡开发新的网站，只要不是布局超复杂的项目，不免都要“顺手”做一些响应式布局，尽量以低成本兼容更多的浏览器/设备。现代的移动设备尺寸多样，对于CSS的兼容问题也层出不穷，本文主要探讨Media Queries的分辨顺序问题。从粗略的概念视角开始，不涉及具体的技术细节。 查看详细
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：
1 2 3 4 5 | div { width: 95%; width: -webkit-calc(100% - 50px); width: calc(100% - 50px); } |
现在大部分流行的WP主题都采用了响应式设计（Responsive Web Design），我的博客主题修改自twentytwelve – WP自带的的一个轻量级主题，个人认为它的样式表写法在兼容性上已经做得很好了。今天就来提炼一下其中的精华，也包括一些不太常见的CSS条目。 查看详细