网页布局——响应式布局

响应式布局是一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本

@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;
}