响应式布局

先看一小例子：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>css响应式</title>
    <style>
    body {
        padding: 0;
        margin: 0;
    }
    
    .container {
        width: 600px;
        background: red;
        height: 80px;
    }
    /*当页面最小宽度满足600px时调用*/
    
    @media only screen and (min- 600px) {
        .container {
            background: #000;
        }
    }
    </style>
</head>

<body>
    <div class="container">
        内容
    </div>
</body>

</html>

大于600px，显示黑色

小于600px，显示红色

<meta name="viewport" content="width=device-width,initial-scale=1" />

不允许手机缩放

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

@media引入方式：

1、CSS中使用：

@media screen and (max- 600px) {
    选择器 {
      属性：属性值；
    }


    选择器 {
      属性：属性值；
    }
 
  }

2、link方法引入：

<link rel="stylesheet"  href="style.css" media="screen and (min-600px)" >

Media Query 条件：

1、样式适用于宽度小于480px的

<link rel="stylesheet" media="screen and (max-device- 480px)" href="iphone.css" type="text/css" />

2、针对iphone4s

 <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

3、iPad在纵向(portrait)时采用portrait.css来渲染页面；在横向（landscape）时采用landscape.css来渲染页面

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />

4、android

 /*240px的宽度*/
  <link rel="stylesheet" media="only screen and (max-device-240px)" href="android240.css" type="text/css" />
  /*360px的宽度*/
  <link rel="stylesheet" media="only screen and (min-device-241px) and (max-device-360px)" href="android360.css" type="text/css" />
  /*480px的宽度*/
  <link rel="stylesheet" media="only screen and (min-device-361px) and (max-device-480px)" href="android480.css" type="text/css" />

IE8和之前的浏览器不支持CSS3 media queries，你可以在页面中添加css3-mediaqueries.js来解决这个问题

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

响应布局的注意事项：

未经调整的浏览器都符合: 1em=16px，为了方便em与px进行转换计算，希望1em=10px，怎么做呢？让16除以10就可以了，1em=16px*0.625=10px;

字体设为62.5%

html{font-size:62.5%;}

设置最小宽度和最大宽度，

min-width 和 max-width

布局尽量用百分比，不固定像素

使用怪异盒模型，避免内容大的时候撑大

box-sizing:border-box;