移動端響應式布局 ：
1.media query:
根據(jù)屏幕的寬度和設備的寬度設置不同的樣式
設置方式 @media screen and ( min-width: ) and( max-width: ){
樣式
}
2.設置寬度 :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.設置像素比 : -webkit-min-device-pixel-ratio:2
蘋果是2 安卓是1.5或者1
