移動端響應(yīng)式布局 ：

1.media query:
根據(jù)屏幕的寬度和設(shè)備的寬度設(shè)置不同的樣式
設(shè)置方式 @media screen and ( min-width: ) and( max-width: ){
樣式
}
2.設(shè)置寬度 :device-width device-height
@media screen and ( min-width:320px) and ( max-width: 350px ){
html{
font-size:10px;
}
.content{
background: red;
}
}
@media screen and ( min-width:351px ) and ( max-width: 414px ){
html{
font-size:14px;
}
.content{
background: green;
}
}
3.IOS端兼容:
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
.class{}
}

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
.class{}
}

@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */
.class{}
}

@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */
.class{}
}

4.設(shè)置像素比 : -webkit-min-device-pixel-ratio:2
蘋果是2 安卓是1.5或者1