H5移动端的注意细节

1、

max-width用在pc端页面,max-device-width用在移动设备上

2、

device-pixel-ratio 设备像素比

3、设备自己单位-物理单位dp/dip

css像素 px

设备像素比是1 1px == 1dp/1dip
设备像素比是2 1px == 4dp/4dip
设备像素比是3 1px == 9dp/9dip

/* 普通显示屏(设备像素比例小于等于1)使用1倍的图 */
.css{
background-image: url(img_1x.png);
}

/* 高清显示屏(设备像素比例大于等于2)使用2倍图 */
@media only screen and (-webkit-min-device-pixel-ratio:2){
.css{
background-image: url(img_2x.png);
}
}

/* 高清显示屏(设备像素比例大于等于3)使用3倍图 */
@media only screen and (-webkit-min-device-pixel-ratio:3){
.css{
background-image: url(img_3x.png);
}
}

4、

<meta name = "viewport" content="width=device-width,initial-scale = 1.0,user-scalable = no">
<!--响应式页面不允许用户去缩放-->

<meta name="viewport" content="width = device-width,initial-scale = 1.0"/>
<!--user-scalable:no 禁止用户缩放-->

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

5、@media对比：

@media screen and (max-1000px){
/*当显示区域的宽度小于等于1000时,以下的css起作用*/
div{
980px;
background: red;
}
}

@media all and (min- 1000px) {/*窗口宽度大于等于1000时,这儿的样式起作用*/
.header {
1000px;
margin: 0 auto;
}
}

@media screen and (max-1000px){
/*当显示区域的宽度小于等于1000时,以下的css起作用*/
div{
980px;
background: red;
}
}

6、