响应式布局

移动端响应式布局 ：

1.media query:
根据屏幕的宽度和设备的宽度设置不同的样式
设置方式 @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