响应式布局

1 css3媒体查询

媒体查询用于检查当前媒体的某些特性，通常情况下以查询浏览器的宽度作为适配css的首要目标. 媒体查询的两种方式

1 写在css文件或者style标签内

2 在link css文件的时候做选择

@media screen and (min-width:480px) { /*CSS 规则*/ }

<link rel="stylesheet" media="screen and (min-width:1px) and (max-width:480px)"            href="../css/mobile.css" />
<link rel="stylesheet" media="screen and (min-width:481px)" href="../css/desktop.css" />

2 流式布局

将页面元素的从设计稿的绝对大小换算成百分比比例

3 流式图片和对象

通过一些css技巧，使图像和媒体，对象的比例适合容器大小的约束，不会超越父容器