首先要是做瀏覽器在手里中的適配

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

寫(xiě)法

<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) { /*當(dāng)屏幕尺寸小于6600px時(shí)，應(yīng)用下面的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="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

注意事項(xiàng)

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

移動(dòng)要設(shè)置好最好寬度(min-width)、最大寬度(max-width)

寬度一定要設(shè)置成百分比，不要設(shè)置成固定像素

box-sizing:border-box;/*標(biāo)準(zhǔn)和和模型設(shè)置好就不會(huì)把里面的內(nèi)容給壓壞*/