响应式布局-初级

首先要是做浏览器在手里中的适配

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

写法

<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width:600px)
    and (max-width:800px)">

<link rel="stylesheet" type="text/css" href="styleA.cc"
    media="screen and (min-width:400px)">

<style type="text/css">
      @media screen and (max-width: 600px) { /*当屏幕尺寸小于6600px时，应用下面的css样式*/
        .class {
            background-color: #ccc;
        }
      }
    </style>

<link rel="stylesheet" type="text/css" href="iphone4.css"
    media="only screen and (-webkit-min-device-pixel-ratio:2)
    ">
    /*（orientation:portrait）横向 （landscape）*/

HACK

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

注意事项

html {
    font-size:62.5%; /*font-size:2rem==font-size:20px*/
}

移动要设置好最好宽度(min-width)、最大宽度(max-width)

宽度一定要设置成百分比，不要设置成固定像素

box-sizing:border-box;/*标准和和模型设置好就不会把里面的内容给压坏*/