<!doctype html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="utf-8"><title>Media Queries: How to target desktop, tablet and mobile?</title><meta name="keywords" content="geovindu"><meta name="description" content="涂聚文"><meta name="author" content="涂聚文"><style type="text/css">/*Media Queries: How to target desktop, tablet and mobile?http://webdesignerwall.com/tutorials/css3-media-querieshttps://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobilehttps://css-tricks.com/snippets/css/media-queries-for-standard-devices/https://wordpress.org/plugins/wp-mobile-detect/https://html5test.com/results/desktop.html*//* ----------- iPhone 4 and 4S ----------- *//* Portrait and Landscape */@media only screen ??and (min-device-width: 320px) ??and (max-device-width: 480px) ?and (-webkit-min-device-pixel-ratio: 2) { ?/* define mobile specific styles come here */ ?}/* Portrait */@media only screen ??and (min-device-width: 320px) ??and (max-device-width: 480px) ?and (-webkit-min-device-pixel-ratio: 2) ?and (orientation: portrait) {}/* Landscape */@media only screen ??and (min-device-width: 320px) ??and (max-device-width: 480px) ?and (-webkit-min-device-pixel-ratio: 2) ?and (orientation: landscape) {}/* ----------- iPhone 5, 5S, 5C and 5SE ----------- *//* Portrait and Landscape */@media only screen ??and (min-device-width: 320px) ??and (max-device-width: 568px) ?and (-webkit-min-device-pixel-ratio: 2) {}/* Portrait */@media only screen ??and (min-device-width: 320px) ??and (max-device-width: 568px) ?and (-webkit-min-device-pixel-ratio: 2) ?and (orientation: portrait) {}/* Landscape */@media only screen ??and (min-device-width: 320px) ??and (max-device-width: 568px) ?and (-webkit-min-device-pixel-ratio: 2) ?and (orientation: landscape) {}/* ----------- iPhone 6, 6S, 7 and 8 ----------- *//* Portrait and Landscape */@media only screen ??and (min-device-width: 375px) ??and (max-device-width: 667px) ??and (-webkit-min-device-pixel-ratio: 2) { }/* Portrait */@media only screen ??and (min-device-width: 375px) ??and (max-device-width: 667px) ??and (-webkit-min-device-pixel-ratio: 2) ?and (orientation: portrait) { }/* Landscape */@media only screen ??and (min-device-width: 375px) ??and (max-device-width: 667px) ??and (-webkit-min-device-pixel-ratio: 2) ?and (orientation: landscape) { }/* ----------- iPhone 6+, 7+ and 8+ ----------- *//* Portrait and Landscape */@media only screen ??and (min-device-width: 414px) ??and (max-device-width: 736px) ??and (-webkit-min-device-pixel-ratio: 3) { }/* Portrait */@media only screen ??and (min-device-width: 414px) ??and (max-device-width: 736px) ??and (-webkit-min-device-pixel-ratio: 3) ?and (orientation: portrait) { }/* Landscape */@media only screen ??and (min-device-width: 414px) ??and (max-device-width: 736px) ??and (-webkit-min-device-pixel-ratio: 3) ?and (orientation: landscape) { }/* ----------- iPhone X ----------- *//* Portrait and Landscape */@media only screen ??and (min-device-width: 375px) ??and (max-device-width: 812px) ??and (-webkit-min-device-pixel-ratio: 3) { }/* Portrait */@media only screen ??and (min-device-width: 375px) ??and (max-device-width: 812px) ??and (-webkit-min-device-pixel-ratio: 3) ?and (orientation: portrait) { }/* Landscape */@media only screen ??and (min-device-width: 375px) ??and (max-device-width: 812px) ??and (-webkit-min-device-pixel-ratio: 3) ?and (orientation: landscape) { }/* ----------- Galaxy S3 ----------- *//* Portrait and Landscape */@media screen ??and (device-width: 320px) ??and (device-height: 640px) ??and (-webkit-device-pixel-ratio: 2) {}/* Portrait */@media screen ??and (device-width: 320px) ??and (device-height: 640px) ??and (-webkit-device-pixel-ratio: 2) ??and (orientation: portrait) {}/* Landscape */@media screen ??and (device-width: 320px) ??and (device-height: 640px) ??and (-webkit-device-pixel-ratio: 2) ??and (orientation: landscape) {}/* ----------- Galaxy S4, S5 and Note 3 ----------- *//* Portrait and Landscape */@media screen ??and (device-width: 320px) ??and (device-height: 640px) ??and (-webkit-device-pixel-ratio: 3) {}/* Portrait */@media screen ??and (device-width: 320px) ??and (device-height: 640px) ??and (-webkit-device-pixel-ratio: 3) ??and (orientation: portrait) {}/* Landscape */@media screen ??and (device-width: 320px) ??and (device-height: 640px) ??and (-webkit-device-pixel-ratio: 3) ??and (orientation: landscape) {}/* ----------- Galaxy S6 ----------- *//* Portrait and Landscape */@media screen ??and (device-width: 360px) ??and (device-height: 640px) ??and (-webkit-device-pixel-ratio: 4) {}/* Portrait */@media screen ??and (device-width: 360px) ??and (device-height: 640px) ??and (-webkit-device-pixel-ratio: 4) ??and (orientation: portrait) {}/* Landscape */@media screen ??and (device-width: 360px) ??and (device-height: 640px) ??and (-webkit-device-pixel-ratio: 4) ??and (orientation: landscape) {}/* ----------- Google Pixel ----------- *//* Portrait and Landscape */@media screen ??and (device-width: 360px) ??and (device-height: 640px) ??and (-webkit-device-pixel-ratio: 3) {}/* Portrait */@media screen ??and (device-width: 360px) ??and (device-height: 640px) ??and (-webkit-device-pixel-ratio: 3) ??and (orientation: portrait) {}/* Landscape */@media screen ??and (device-width: 360px) ??and (device-height: 640px) ??and (-webkit-device-pixel-ratio: 3) ??and (orientation: landscape) {}/* ----------- Google Pixel XL ----------- *//* Portrait and Landscape */@media screen ??and (device-width: 360px) ??and (device-height: 640px) ??and (-webkit-device-pixel-ratio: 4) {}/* Portrait */@media screen ??and (device-width: 360px) ??and (device-height: 640px) ??and (-webkit-device-pixel-ratio: 4) ??and (orientation: portrait) {}/* Landscape */@media screen ??and (device-width: 360px) ??and (device-height: 640px) ??and (-webkit-device-pixel-ratio: 4) ??and (orientation: landscape) {}/* ----------- HTC One ----------- *//* Portrait and Landscape */@media screen ??and (device-width: 360px) ??and (device-height: 640px) ??and (-webkit-device-pixel-ratio: 3) {}/* Portrait */@media screen ??and (device-width: 360px) ??and (device-height: 640px) ??and (-webkit-device-pixel-ratio: 3) ??and (orientation: portrait) {}/* Landscape */@media screen ??and (device-width: 360px) ??and (device-height: 640px) ??and (-webkit-device-pixel-ratio: 3) ??and (orientation: landscape) {}/* ----------- Windows Phone ----------- *//* Portrait and Landscape */@media screen ??and (device-width: 480px) ??and (device-height: 800px) {}/* Portrait */@media screen ??and (device-width: 480px) ??and (device-height: 800px) ???and (orientation: portrait) {}/* Landscape */@media screen ??and (device-width: 480px) ??and (device-height: 800px) ??and (orientation: landscape) {}/* ----------- iPad 1, 2, Mini and Air ----------- *//* Portrait and Landscape */@media only screen ??and (min-device-width: 768px) ??and (max-device-width: 1024px) ??and (-webkit-min-device-pixel-ratio: 1) {}/* Portrait */@media only screen ??and (min-device-width: 768px) ??and (max-device-width: 1024px) ??and (orientation: portrait) ??and (-webkit-min-device-pixel-ratio: 1) {}/* Landscape */@media only screen ??and (min-device-width: 768px) ??and (max-device-width: 1024px) ??and (orientation: landscape) ??and (-webkit-min-device-pixel-ratio: 1) {}/* ----------- iPad 3, 4 and Pro 9.7" ----------- *//* Portrait and Landscape */@media only screen ??and (min-device-width: 768px) ??and (max-device-width: 1024px) ??and (-webkit-min-device-pixel-ratio: 2) {}/* Portrait */@media only screen ??and (min-device-width: 768px) ??and (max-device-width: 1024px) ??and (orientation: portrait) ??and (-webkit-min-device-pixel-ratio: 2) {}/* Landscape */@media only screen ??and (min-device-width: 768px) ??and (max-device-width: 1024px) ??and (orientation: landscape) ??and (-webkit-min-device-pixel-ratio: 2) {}/* ----------- iPad Pro 10.5" ----------- *//* Portrait and Landscape */@media only screen ??and (min-device-width: 834px) ??and (max-device-width: 1112px) ?and (-webkit-min-device-pixel-ratio: 2) {}/* Portrait *//* Declare the same value for min- and max-width to avoid colliding with desktops *//* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/@media only screen ??and (min-device-width: 834px) ??and (max-device-width: 834px) ??and (orientation: portrait) ??and (-webkit-min-device-pixel-ratio: 2) {}/* Landscape *//* Declare the same value for min- and max-width to avoid colliding with desktops *//* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/@media only screen ??and (min-device-width: 1112px) ??and (max-device-width: 1112px) ??and (orientation: landscape) ??and (-webkit-min-device-pixel-ratio: 2) {}/* ----------- iPad Pro 12.9" ----------- *//* Portrait and Landscape */@media only screen ??and (min-device-width: 1024px) ??and (max-device-width: 1366px) ?and (-webkit-min-device-pixel-ratio: 2) {}/* Portrait *//* Declare the same value for min- and max-width to avoid colliding with desktops *//* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/@media only screen ??and (min-device-width: 1024px) ??and (max-device-width: 1024px) ??and (orientation: portrait) ??and (-webkit-min-device-pixel-ratio: 2) {}/* Landscape *//* Declare the same value for min- and max-width to avoid colliding with desktops *//* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/@media only screen ??and (min-device-width: 1366px) ??and (max-device-width: 1366px) ??and (orientation: landscape) ??and (-webkit-min-device-pixel-ratio: 2) {}/* ----------- Galaxy Tab 2 ----------- *//* Portrait and Landscape */@media ??(min-device-width: 800px) ??and (max-device-width: 1280px) {}/* Portrait */@media ??(max-device-width: 800px) ??and (orientation: portrait) { }/* Landscape */@media ??(max-device-width: 1280px) ??and (orientation: landscape) { }/* ----------- Galaxy Tab S ----------- *//* Portrait and Landscape */@media ??(min-device-width: 800px) ??and (max-device-width: 1280px) ?and (-webkit-min-device-pixel-ratio: 2) {}/* Portrait */@media ??(max-device-width: 800px) ??and (orientation: portrait) ?and (-webkit-min-device-pixel-ratio: 2) { }/* Landscape */@media ??(max-device-width: 1280px) ??and (orientation: landscape) ?and (-webkit-min-device-pixel-ratio: 2) { }/* ----------- Nexus 7 ----------- *//* Portrait and Landscape */@media screen ??and (device-width: 601px) ??and (device-height: 906px) ??and (-webkit-min-device-pixel-ratio: 1.331) ??and (-webkit-max-device-pixel-ratio: 1.332) {}/* Portrait */@media screen ??and (device-width: 601px) ??and (device-height: 906px) ??and (-webkit-min-device-pixel-ratio: 1.331) ??and (-webkit-max-device-pixel-ratio: 1.332) ??and (orientation: portrait) { ?}/* Landscape */@media screen ??and (device-width: 601px) ??and (device-height: 906px) ??and (-webkit-min-device-pixel-ratio: 1.331) ??and (-webkit-max-device-pixel-ratio: 1.332) ??and (orientation: landscape) {}/* ----------- Nexus 9 ----------- *//* Portrait and Landscape */@media screen ??and (device-width: 1536px) ??and (device-height: 2048px) ??and (-webkit-min-device-pixel-ratio: 1.331) ??and (-webkit-max-device-pixel-ratio: 1.332) { ?}/* Portrait */@media screen ??and (device-width: 1536px) ??and (device-height: 2048px) ??and (-webkit-min-device-pixel-ratio: 1.331) ??and (-webkit-max-device-pixel-ratio: 1.332) ??and (orientation: portrait) { ?}/* Landscape */@media screen ??and (device-width: 1536px) ??and (device-height: 2048px) ??and (-webkit-min-device-pixel-ratio: 1.331) ??and (-webkit-max-device-pixel-ratio: 1.332) ??and (orientation: landscape) {}/* ----------- Kindle Fire HD 7" ----------- *//* Portrait and Landscape */@media only screen ??and (min-device-width: 800px) ??and (max-device-width: 1280px) ??and (-webkit-min-device-pixel-ratio: 1.5) {}/* Portrait */@media only screen ??and (min-device-width: 800px) ??and (max-device-width: 1280px) ??and (-webkit-min-device-pixel-ratio: 1.5) ??and (orientation: portrait) { ?}/* Landscape */@media only screen ??and (min-device-width: 800px) ??and (max-device-width: 1280px) ??and (-webkit-min-device-pixel-ratio: 1.5) ??and (orientation: landscape) {}/* ----------- Kindle Fire HD 8.9" ----------- *//* Portrait and Landscape */@media only screen ??and (min-device-width: 1200px) ??and (max-device-width: 1600px) ??and (-webkit-min-device-pixel-ratio: 1.5) { ?}/* Portrait */@media only screen ??and (min-device-width: 1200px) ??and (max-device-width: 1600px) ??and (-webkit-min-device-pixel-ratio: 1.5) ??and (orientation: portrait) {}/* Landscape */@media only screen ??and (min-device-width: 1200px) ??and (max-device-width: 1600px) ??and (-webkit-min-device-pixel-ratio: 1.5) ??and (orientation: landscape) { ?}/* ----------- Non-Retina Screens ----------- */@media screen ??and (min-device-width: 1200px) ??and (max-device-width: 1600px) ??and (-webkit-min-device-pixel-ratio: 1) { ??}/* ----------- Retina Screens ----------- */@media screen ??and (min-device-width: 1200px) ??and (max-device-width: 1600px) ??and (-webkit-min-device-pixel-ratio: 2) ?and (min-resolution: 192dpi) { ??}/* ----------- Apple Watch ----------- */@media ?(max-device-width: 42mm) ?and (min-device-width: 38mm) { ??}/* ----------- Moto 360 Watch ----------- */@media ??(max-device-width: 218px) ?and (max-device-height: 281px) { ??}</style></head><body></body></html>
css:Media Queries: How to target desktop, tablet and mobile?
原文地址：https://www.cnblogs.com/geovindu/p/9492579.html