响应式布局

/* pc width > 1200px */
body {
/* background-color: yellow; */
min-width: 1200px;
}
/* ipad pro */
@media screen and (max-width: 1200px) {
　　body {
　　　　/* background-color: #FF00FF; */
　　　　min-width: 750px;
　　}
}
/* ipad */
@media screen and (max-width: 768px) {
　　body {
　　　　/* background-color: green; */
　　　　min-width: 414px;
　　}
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
　　body {
　　　　/* background-color: blue; */　　
　　　　min-width: 320px;
　　}

}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
　　body {
　　　　/* background-color: #0FF000; */
　　}

}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
　　body {
　　　　/* background-color: #0FF000; */
　　}

}
/* iphone5 */
@media screen and (max-width: 320px) {
　　body {
　　　　/* background-color: #0FF000; */
　　}
}