移動端媒體查詢的一些尺寸參考
/*iphone4 4s*/
@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){
/* Styles */
}
@media screen and (min-width: 320px) and (max-width: 480px) {
/* Styles */
}
/*iphone5*/
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){
/* Styles */
}
/*iphone6*/
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
/* Styles */
}
/*iphone6+*/
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
/* Styles */
}
/* iPads (portrait) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* iPads (landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait and landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/*魅族*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){
/* Styles */
}
/*mate7*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){
/* Styles */
}
/* 平板之類的寬度 1024 以下設備 */
@media only screen and (min-width: 321px) and (max-width: 1024px) {
/* Styles */
}
/* PC客戶端或大屏幕設備: 1028px 至更大 */
@media only screen and (min-width: 1029px) {
/* Styles */
}
/* 豎屏 */
@media screen and (orientation:portrait) and (max-width: 720px) {
/* Styles */
}
/* 橫屏 */
@media screen and (orientation:landscape) and (min-width : 480px){
/* Styles */
}
常規尺寸詳細適配
@media screen and (min-width: 320px) { }
@media screen and (min-width: 360px) { }
@media screen and (min-width: 375px) { }
@media screen and (min-width: 400px) { }
@media screen and (min-width: 414px) { }
@media screen and (min-width: 440px) { }
@media screen and (min-width: 480px) { }
@media screen and (min-width: 520px) { }
@media screen and (min-width: 560px) { }
@media screen and (min-width: 600px) { }
@media screen and (min-width: 640px) { }
@media screen and (min-width: 680px) { }
@media screen and (min-width: 720px) { }
@media screen and (min-width: 760px) { }
@media screen and (min-width: 800px) { }
@media screen and (min-width: 960px) { }
注意事項：
width 指的是可視區域的寬度，當頁面 scale 被設置成 0.5 時，其值會放大一倍。
device-width 是設備實際的寬度，不會隨着屏幕的旋轉而改變，因此並不適合開發響應式網站。
比如 iphone5s 的屏幕分辨率寬為 640，由於 retina 顯示策略，當 scale 設置為1的時候，對應的media 中取到的 width 為320，當 scale 設置為0.5的時候，width為640，而 device-width 始終是320。
總結
1.device-width 只和設備的分辨率有關，一般是分辨率/設備像素比，且不會隨着手機旋轉而改變其值
2.width 會和 viewport 的 scale 屬性相關，為頁面的可視區域的寬度