移动端媒体查询的一些尺寸参考

< meta charset = "UTF-8" / > < meta name = "renderer" content = "webkit" / > < meta http -equiv = "X-UA-Compatible" content = "IE=EDGE, chrome=1" > < meta name = "viewport" content = "width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" / > < meta name = "apple-mobile-web-app-capable" content = "yes" / > < meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent" / > < meta name = "msapplication-tap-highlight" content = "no" / > < meta name = "format-detection" content = "telephone=no" / > / @media (device -height : 568 px) and ( -webkit -min -device -pixel -ratio : 2 ){ /* 兼容iphone5 */ }@media only screen and ( max -device -width : 480 px){ }@media only screen and ( min -device -width : 481 px){ } /*6*/ @media ( min -device -width : 375 px) and ( max -device -width : 667 px) and ( -webkit -min -device -pixel -ratio : 2 ){ } /*6+*/ @media ( min -device -width : 414 px) and ( max -device -width : 736 px) and ( -webkit -min -device -pixel -ratio : 3 ){ } /*魅族*/ @media only screen and ( min -device -width : 1080 px) and ( -webkit -min -device -pixel -ratio : 2.5 ){ } /*mate7*/ @media only screen and ( min -device -width : 1080 px) and ( -webkit -min -device -pixel -ratio : 3 ){ } /*4 4s*/ @media only screen and (device -height : 480 px) and ( -webkit -device -pixel -ratio : 2 ){ }@media screen and ( min -width : 320 px) and ( max -width : 480 px) { } /* 平板之类的宽度 1024 以下设备 */ @media only screen and ( min -width : 321 px) and ( max -width : 1024 px) {body {background: blue;}} /* PC客户端或大屏幕设备: 1028px 至更大 */ @media only screen and ( min -width : 1029 px) {body {background: green;}} /* 竖屏 */ @media screen and (orientation:portrait) and ( max -width : 720 px) {对应样式} /* 横屏 */ @media screen and (orientation:landscape){对应样式}iPhone5s 504 * 320 <! DOCTYPE html > < html > < head lang = "en" > < meta charset = "utf-8" > < meta name = "format-detection" content = "telephone=no" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" > < meta name = "apple-mobile-web-app-capable" content = "yes" > < meta name = "apple-touch-fullscreen" content = "yes" > < meta http -equiv = "Access-Control-Allow-Origin" content = "*" > < link href = "css/global.css" type = "text/css" rel = "stylesheet" > < link href = "css/header.css" type = "text/css" rel = "stylesheet" > < link href = "css/shop-history.css" type = "text/css" rel = "stylesheet" > < title >< /title > < /head > < body > < div > < header > < div > < /div > < / header > < article > < /article > < footer > < div > < /div > < /footer > < /div > < /body > < /html >

< meta charset = "UTF-8" / > < meta name = "renderer" content = "webkit" / > < meta http -equiv = "X-UA-Compatible" content = "IE=EDGE, chrome=1" > < meta name = "viewport" content = "width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" / > < meta name = "apple-mobile-web-app-capable" content = "yes" / > < meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent" / > < meta name = "msapplication-tap-highlight" content = "no" / > < meta name = "format-detection" content = "telephone=no" / > / @media (device -height : 568 px) and ( -webkit -min -device -pixel -ratio : 2 ){ /* 兼容iphone5 */ }@media only screen and ( max -device -width : 480 px){ }@media only screen and ( min -device -width : 481 px){ } /*6*/ @media ( min -device -width : 375 px) and ( max -device -width : 667 px) and ( -webkit -min -device -pixel -ratio : 2 ){ } /*6+*/ @media ( min -device -width : 414 px) and ( max -device -width : 736 px) and ( -webkit -min -device -pixel -ratio : 3 ){ } /*魅族*/ @media only screen and ( min -device -width : 1080 px) and ( -webkit -min -device -pixel -ratio : 2.5 ){ } /*mate7*/ @media only screen and ( min -device -width : 1080 px) and ( -webkit -min -device -pixel -ratio : 3 ){ } /*4 4s*/ @media only screen and (device -height : 480 px) and ( -webkit -device -pixel -ratio : 2 ){ }@media screen and ( min -width : 320 px) and ( max -width : 480 px) { } /* 平板之类的宽度 1024 以下设备 */ @media only screen and ( min -width : 321 px) and ( max -width : 1024 px) {body {background: blue;}} /* PC客户端或大屏幕设备: 1028px 至更大 */ @media only screen and ( min -width : 1029 px) {body {background: green;}} /* 竖屏 */ @media screen and (orientation:portrait) and ( max -width : 720 px) {对应样式} /* 横屏 */ @media screen and (orientation:landscape){对应样式}iPhone5s 504 * 320 <! DOCTYPE html > < html > < head lang = "en" > < meta charset = "utf-8" > < meta name = "format-detection" content = "telephone=no" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" > < meta name = "apple-mobile-web-app-capable" content = "yes" > < meta name = "apple-touch-fullscreen" content = "yes" > < meta http -equiv = "Access-Control-Allow-Origin" content = "*" > < link href = "css/global.css" type = "text/css" rel = "stylesheet" > < link href = "css/header.css" type = "text/css" rel = "stylesheet" > < link href = "css/shop-history.css" type = "text/css" rel = "stylesheet" > < title >< /title > < /head > < body > < div > < header > < div > < /div > < / header > < article > < /article > < footer > < div > < /div > < /footer > < /div > < /body > < /html >