1.user-scalable：用户是否可以手动缩放。
2.box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。指定宽度和高度的框，并把边框和内边距放入框中。
3.@media 可以针对不同的屏幕尺寸设置不同的样式
4.如果文档宽度小于 300 像素则修改背景演示(background-color):
@media screen and (max-width: 300px) {
body {
margin: 0px; padding: 0px; color: rgb(170, 17, 17);">lightblue;
}
}
5.img,width 属性设置为 100%，图片会根据上下范围实现响应式功能,图片会比它的原始图片大。我们可以使用 max-width 属性很好的解决这个问题
img {
max-width: 100%;
height: auto;
}
6.HTML5 的 <picture> 元素可以设置多张图片。
<picture> <source srcset="img_smallflower.jpg" media="(max-width: 400px)"> <source srcset="img_flowers.jpg"> <img src="img_flowers.jpg" alt="Flowers"> </picture>
原文：http://www.cnblogs.com/LWJ-booke/p/7373108.html