响应式设计的步骤
- 设置 Meta 标签
- 通过媒介查询来设置样式 Media Queries
- 设置多种试图宽度
1设置 Meta 标签：
大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。
2通过媒介查询来设置样式 Media Queries
Media Queries 是响应式设计的核心。
它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：
@media screen and (max-width: 980px) { #head { … } #content { … } #footer { … }} 这里的样式就会覆盖上面已经定义好的样式。
3设置多种试图宽度
假如我们要设定兼容 iPad 和 iphone 的视图，那么可以这样设置：
/** iPad **/@media only screen and (min-width: 768px) and (max-width: 1024px) {}/** iPhone **/@media only screen and (min-width: 320px) and (max-width: 767px) {} 一些注意的
- 宽度需要使用百分比
例如这样：
请输入代码