首先要是做浏览器在手里中的适配
<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;/*标准和和模型设置好就不会把里面的内容给压坏*/
