响应式布局是一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本
@media all(用于所有的设备) || screen (用于电脑屏幕,平板电脑,智能手机等) and|not|only(三个关键字可以选)
1 <head> 2 <style media="screen"> 3 @media screen and (max-600px){ 4 .con{ 5 background:red; 6 } 7 } 8 @media screen and (min-600px) and (max-800px){ 9 .con{ 10 background:blue; 11 } 12 } 13 @media screen and (min-800px){ 14 .con{ 15 background:green; 16 } 17 } 18 .con{ 19 width: 100%; 20 height: 100px; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="con"> 26 一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本 27 </div> 28 </body>
1.meta 标签
最简单的处理方式是加上一个 meta 标签设置屏幕按1：1尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。
其中，width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。
1 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 2 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 3 <meta name="HandheldFriendly" content="true">
2.通过媒体查询设置样式media query
media query 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现，假如一个终端的分辨率小于980px，那么可以这样写:
1 @media screen and (max-980px){ 2 #head { …; } 3 #content { …; } 4 #footer { …; } 5 }
意思就是： 当屏幕的宽度大于等于 980 px 的时候 html 设置样式。
rem 指的是 html 元素的 font-size，html 元素的 font-size 默认是 16px，所以 1 rem = 16px；然后根据 rem 来计算各个元素的宽高，然后配合 media query 就可以实现自适应。
3.设置多种视图
假如我们要兼容ipad和iphone视图，我们可以这样设置：
1 /**ipad**/ 2 @media only screen and (min-768px)and(max-1024px){} 3 /**iphone**/ 4 @media only screen and (320px)and (768px){}
4.响应式设计需要注意的问题
4.1、宽度不固定，可以使用百分比
#head{width:100%;} #content{width:50%;}
4.2、在html页面中的图片，比如文章里插入的图片我们都可以通过css样式max-width来进行控制图片的最大宽度，如：
img{ max-width:100%; height:auto; }