在响应式设计的网页布局中有一些元素没有发挥好，直接损坏响应式设计的布局。其中之一就是iframe元素，因为有时候你需要在页面中嵌入外部资源，比如说YouTobe的视频，这个时候就需要用到iframe元素。在这篇文章中，我将会向您介绍如何使用CSS将嵌套进来的内容具有响应式的效果，比如说视频、日历等能随着浏览器的视窗自动调整。那于在网站上嵌入外部视频，而你又不想添加额外的标签，我们也将会介绍如何使用JavaScript来替代CSS，让其在响应式设计的网站中能自动调整。

一些读者或许好奇的是，人们为什么对“响应式web设计”（RWD）的关注度快速提高，开发人员都把此技术作为自己必备的技能之一，深入去学习理解这项新技术。这名称也常常作为前沿移动终端技术被提起。我们不会空谈概念，会把定义说清楚，并使用代码例子演示这项技术。如果你花一些时间来测试和了解真实的现代网络和移动技术，你就会体会到响应式web设计的好处在哪了，实现一个响应式设计可能比你想象的还要简单。现在我们都感受到Internet的变化是如此之快，促使这变化正是不断涌现的各种移动终端设备。有最近的研究表明，在未来3到5年内，通过接入网络的移动设备将超越桌面电脑设备。要适应这么快速转化也给开发人员面临巨大压力与挑战，对能力有了新的要求。

排版是响应式Web设计最重要的内容之一，如果你想内容能在所有尺寸屏幕上友好地显示，那就绝对有必要地为移动设备优化字体。幸运的是，实现弹性字体的过程并不是那么困难。当我讨论弹性（在这种情况下，是一种指导原则），我们不能忽视指定字体来适应我们响应式网站。我们可能使用不用单位标准来实现这个目标，包括pixel(像素)，em，rem或者是百分比。那么选择一个正确的标准对设计一个可塑的，响应式的交互界面是至关重要的。在这关于响应式Web设计的系列中，我将讲解如何响应式地管理动态字体，也会逐个分析上面所提到的每个单位标准，对比各自的优缺点。

在大约一年半年前使用Sass的时候，有一件事让我花了很长的时间，那就是如何区别Sass的@mixin和%placeholder。实际上，%placeholder。在当时的情况这之下，就算是概念对我来说都是黑色地带。如果你也碰到类似的情况，不用担心，因为我会尽量的引导你。今天我们就来探究，什么时候是定义好的，什么时候是定义好的。你就会明白它们服务的目的是不一样的，不能混为一谈。

很多开发者都认识到，在网站或应用程序的开发中使一些组件非常强大，但是这些组件开发起来并不是一件易事。今天我们就一起来探讨一下如何使用Sass来开发组件。因为讲述任何东西都没有直接拿用例来介绍更好，我建议我们要采用的示例是大家在网站或应用程序开发中几乎都有用过的，一个响应用户交互的——警告信息(也有很多人称之为“通知”)。使用Sass来创建一个处理不同类型的警告信息的组件是一个很完美的示例，同时还能提高你使用Sass的技术。所以，伙计们，还在犹豫什么，赶紧动手一试吧。

在这篇教程里，我们将重新创建一个类似The Christmas Experiments网站中看到的hover样式。我们将通过SVG制作出形状，然后使用Snap.svg做出hover时的动画效果。如果你已经访问过The Christmas Experiments最新版本的网站，你可能会注意到其中Christmas calendar很酷的三角状的hover效果。那个形状其实是一个带边框的三角形。今天我会向您展示，如何使用SVG和Snap.svg做出同样的效果。我们的想法是，使用一条路径创建一个SVG，用它来表示caption的形状背景，然后在hover时改变这个路径。完成这一任务有很多种创作的可能性，今天我们将做出三个不同的示例。使用SVG的好处是，我们可以根据父容器的大小调整形状的大小，使一切都成为流动的。

移动端的优化最近成了一个时髦的话题，将来也会有更多关于这方面的讨论。根据Mashable在2013年8月份发布的统计，可以得知，全球所有网站流量的17.4%都是通过移动设备来的，而这个数字在2014年将会继续增长。所以，你如果不想失去一杯羹的话，是时候步入移动端的领域了。

响应式设计中主要面对的问题之一是如何缩放图标来适应用户界面，不仅仅是针对于物理尺寸，而且还需要根据屏幕的尺寸和每英寸的像素比例来显示。一般情况之下，都是通过内联块元素<img>标签来添加图标。另一种常见的技术是依赖于网格图标和状态——CSS Sprites，并将其保存为.gif或.png文件。然而，更糟糕的是图片根据响应式内容不断的放大，对于位图图像会产生锯齿，而且会越明显。更糟糕的是，CSS Sprites(雪碧图)制作的图标更无法轻意的缩放。

作为一名前端人员，对一些制作软件并不陌生，而里面的图层混合模式都略有所知。而这些混合模式要是直接应用到Web页面中，将会带来网页制作的一个变革。在2014年开始，在互联网上已经开始在讨论这个东东，并且有一个专业的名词“CSS混合模式”。而这个模式在SVG规范中得到支持，并且在CSS规范中也开始提上议程。在不久的将来，这个新特性就能在各大主流浏览器上得到应用。在文中主要介绍了CSS混合模式将是Web设计中一个重大的变化。并且我们也将陆续向大家推出CSS混合模式相关教程，希望对大家有所帮助。

在过去的几年中，Web开发者被迫接受了几大变化：HTML5的兴趣，预处理器的出现和JavaScript框架，结合一个庞统的一系列技术的变革，推动了整个设计的趋势。在很短的时间内，移动和响应式设计，扁平化(Flat Design)用户界面和深层次的交互页面成为标准做法。那么在2014年Web前端又将会发生什么？如果您对这个话题感兴趣的话，欢迎进入一起讨论与分享。