CSS中自适应布局是一种常见的布局方式，但当浏览器视窗缩小一定程度的时候，内容会挤跨，特别是侧边栏。CSS3中新增加了一个calc()特性，可以让浏览器根据表达式自动计算，真正达到自适应的布局效果。

在过去的几年中，移动端使用的飙升，使我们向网络用户提供内容的方法引起了一场进化或者革命。最终目标是流体的，适应移动端和device-agnostic　Web以及一个已成为受人青睐的学派：响应式设计。然而，虽然响应式设计思想高涨，而电子邮件设计和开发一直在努力跟上。在某种程度上，HTML电子邮件对开发者而言是一个异常复杂的介质，这是一个铁的事实。古老的电子邮件客户技术无法呈现现多的许多的规则，致使一些代码无效。但电子邮件仍然是一个关键的营销渠道，这非常的重要，不能让人忽视的是2012年上半年Litmus公布了一个在移动设备上打开电子邮件的报告，报告显示使用移动设备查阅电子邮件增加了80%。同年Campaign Monitor显示，第一次他们的移动电子邮件打开率实际上已经超过了桌面和Web邮箱。

自从Ethan Marcotte在2010年5月25日发布的《A List Apart》文章开始，响应式网页设计(RWD)讨论的热度并没有减少，但在相同的时间内我们构建电子邮件的方式并没有太多的改变。值得庆幸的是，在过去的一年，人们开始使用RWD和运用类似的方法来设计电子邮件。

如果你使用一个可以上网的手机阅读你的电子邮件，你可能知道，这是一种很不爽的体验。虽然电子邮件在收件箱中看非常完美，当挤到一个小屏幕上，它绝对不能使用，小字体，窄的列和布局打乱是常见的问题。本指南中，我们将看看为什么设计移动端电子邮件成为必备的技能，里面涵盖了设计和构建移动端电子邮件的基础知识，而且还有些巧妙的技巧和技术。我们假设你知道一些关于HTML编写电子邮件的基础知识，如果没有，不用担心，我也提供了几个指南，引导您从头开始。

电子邮件变得相当的重要，它在我们身边随时出现。所以我们重新在思考FogBugz邮件通知的制作，我们知道我们必须在随时随地都能阅读，这意味着移动端上要做很多的优化。在这篇文章中有很丰富的资源。Campaign Monitor提供了一份响应式设计指南，文中一步一步教您如何设计与制作响应式邮件("EDM模板")。Ros Hodgekiss早在2011年8月份就在Smashing Magazine发表了一篇From Monitor To Mobile: Optimizing Email Newsletters With CSS。MailChimp 发表了移动电子邮件的最佳实践相关技巧。如果你不想阅读这么多文章，那你么可以花点时间阅读Litmus团队根据自己产品总结的一些响应式邮件制作的经验。

EDM是"Email Direct Marketing"的缩写，即电子邮件营销，简称为邮件营销。是利用电子邮件与受众客户进行商业交流的一种直销方式。从字面上来说，EDM似乎和前端人员没有太大的关系，可要是说起"EDM模板"，我想很多前端人员都知道，同时也很烦感制作这样的页面，原因大家都懂的。"EDM模板"都是使用表格来制作，并且都是通过行内样式来控制页面的渲染风格，致使很多效果在"EDM模板"中有限制，而且在制作时有很多限制条件，同时还要兼容众多版本的客户端邮件系统。不比处理IE兼容简单。

Responsive（响应式设计）对于今天来说并不是一个新东西，在互联网上有关于响应式设计的教程铺天盖地。而且国外有关于这方面的Web应用也是非常的多。今天也老话重谈，Spy根据Rachel McCollin的《Design-Based Media Queries》所译，向大家介绍Compass Design网站如何实现响应式设计，希望对大家有所帮助。

随着移动设备以及用户终端种类的不断增加，响应式设计在Web是运用越来越广泛。而响应式设计中媒体查询又起着举足轻重的作用，可以说离开了媒体查询，响应式设计就没有了他的灵魂。换句话说，响应式设计做的优秀不优秀，看媒体查询的使用就能知道。到目前为止，智能移动设备的普及化，我们的响应式设计应该考虑移动先行。那么移动先行如何实现呢？媒体查询又对其有什么使用呢？欲想了解，烦请阅读根据Brad Frost的《7 Habits of Highly Effective Media Queries》译文，让你把媒体查询运用的更灵活。

项目列表两端对齐，给一些同学带来了很多困惑，我在群里也时常看到有人问这样的布局问题，记得很早前在《如何在Drupal中避免重复列末尾的Margin》中有做过一点简单的介绍。后来在张旭鑫的博客中，找到两篇《display:inline-block/text-align:justify下列表的两端对齐布局》和《拜拜了,浮动布局-基于display:inline-block的列表布局》中介绍了使用text-align:justify和display:inline-block实现两端对齐。受益无穷。但随着响应式布局的出现，这样的布局又提出一个新的要求，要实现响应式布局，最近邮箱常收到Patrick Kunka的《Text-align: Justify and RWD》一文，觉得蛮好的，特译成中文与大家共享，希望大家喜欢。

Responsive设计在现代Web设计中可谓是越来越流行，但很同学们并未理解其真正的设计概念，往往把Responsive视为一种自适应布局。当然有很多同学也在尝试动写Responsive的案例，但如何取其断点左右纠结，如何设置哪几个断点？又从何入手？

Responsive中的断点都依赖于CSS3的Media Queries来决断。曾在CSS3 Media Queries模板、使用em单位创建CSS3的Media Queries和iPads和iPones的Media Queries有过这方面的介绍。今天特意根据一些Responsive框架整理了一些常见的Media Queries片段，以供大家参考。