一.移动优先
手机设计稿通常更为简约，由手机设计稿开始制作简单版本，随着平板和桌面的引入，页面慢慢复杂，这是一个递增的过程，前期把精力放到核心模块上，默认打开简洁的手机样式，而负责的样式包裹在media query中，所以不会加载，这样访问速度是最佳的
.content {
/*basic effects designed for mobile devices*/
}
@media screen and (min-width: 400px) {
/*complicate effects for pc and etc*/
/*such as loading big image and adding mouse effects when using pc*/
}
举例：移动端采用上下排列布局，这是div自身特性，不需要设置css，而电脑端再设置布局
注意：通常推荐在已有样式表中使用@media，避免额外的http请求
断点：按照内容设置断点而不是设备，不断扩大页面，直到原有的样式无法满足设计，此时设置断点
二.弹性布局、弹性媒介与视窗
流体网格布局，同时针对图片，视频，Flash等，特别设置，简单方法自然是：max-width:100%;，同时兼顾flex布局和相对大小单位em，rem，以上都是针对布局的
还有一大问题在于viewport，设置width=device-width，可指示网页与屏幕宽度进行匹配？？？