{"id":7667,"date":"2010-10-08T11:07:06","date_gmt":"2010-10-08T18:07:06","guid":{"rendered":"http:\/\/css-tricks.com\/"},"modified":"2022-09-30T10:40:35","modified_gmt":"2022-09-30T17:40:35","slug":"media-queries-for-standard-devices","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/css\/media-queries-for-standard-devices\/","title":{"rendered":"Media Queries for Standard Devices"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>If you think responsive&#8217;s simple, I feel bad for you son. We got 99 viewports, but the iPhone&#8217;s just one.<br>\u2014Josh Brewer, <a href=\"https:\/\/twitter.com\/jbrewer\/status\/178528003402379265\" rel=\"noopener\">March 10, 2010<\/a><\/p><\/blockquote>\n\n\n\n<p>A major component of responsive design is creating the right experience for the right device. With a gazillion different devices on the market, this can be a tall task. We&#8217;ve rounded up media queries that can be used to target designs for many standard and popular devices that is certainly worth a read.<\/p>\n\n\n\n<p>If you&#8217;re looking for a comprehensive list of media queries, <a href=\"http:\/\/cssmediaqueries.com\/\" rel=\"noopener\">this repository<\/a> is a good resource.<\/p>\n\n\n\n<p>If you&#8217;re reaction to this is: <em>you should never base your breakpoints on devices!!<\/em> You have a good point. Justin Avery <a href=\"http:\/\/responsivedesign.is\/articles\/why-you-dont-need-device-specific-breakpoints\" rel=\"noopener\">has a nice post<\/a> on the possible pitfalls of using device-specific breakpoints. Choosing breakpoints based on your design and not specific devices is a smart way to go. But sometimes you just need a little help getting one particular situation under control.<\/p>\n\n\n\n<details open>\n  <summary>\n          <h3>Phones and handhelds<\/h3>\n      <\/summary>\n  \n\n<details >\n  <summary>\n          iPhone      <\/summary>\n  \n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* ----------- iPhone 4 and 4S ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media only screen \n  and (min-device-width: 320px) \n  and (max-device-width: 480px)\n  and (-webkit-min-device-pixel-ratio: 2) {\n\n}\n\n\/* Portrait *\/\n@media only screen \n  and (min-device-width: 320px) \n  and (max-device-width: 480px)\n  and (-webkit-min-device-pixel-ratio: 2)\n  and (orientation: portrait) {\n}\n\n\/* Landscape *\/\n@media only screen \n  and (min-device-width: 320px) \n  and (max-device-width: 480px)\n  and (-webkit-min-device-pixel-ratio: 2)\n  and (orientation: landscape) {\n\n}\n\n\/* ----------- iPhone 5, 5S, 5C and 5SE ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media only screen \n  and (min-device-width: 320px) \n  and (max-device-width: 568px)\n  and (-webkit-min-device-pixel-ratio: 2) {\n\n}\n\n\/* Portrait *\/\n@media only screen \n  and (min-device-width: 320px) \n  and (max-device-width: 568px)\n  and (-webkit-min-device-pixel-ratio: 2)\n  and (orientation: portrait) {\n}\n\n\/* Landscape *\/\n@media only screen \n  and (min-device-width: 320px) \n  and (max-device-width: 568px)\n  and (-webkit-min-device-pixel-ratio: 2)\n  and (orientation: landscape) {\n\n}\n\n\/* ----------- iPhone 6, 6S, 7 and 8 ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media only screen \n  and (min-device-width: 375px) \n  and (max-device-width: 667px) \n  and (-webkit-min-device-pixel-ratio: 2) { \n\n}\n\n\/* Portrait *\/\n@media only screen \n  and (min-device-width: 375px) \n  and (max-device-width: 667px) \n  and (-webkit-min-device-pixel-ratio: 2)\n  and (orientation: portrait) { \n\n}\n\n\/* Landscape *\/\n@media only screen \n  and (min-device-width: 375px) \n  and (max-device-width: 667px) \n  and (-webkit-min-device-pixel-ratio: 2)\n  and (orientation: landscape) { \n\n}\n\n\/* ----------- iPhone 6+, 7+ and 8+ ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media only screen \n  and (min-device-width: 414px) \n  and (max-device-width: 736px) \n  and (-webkit-min-device-pixel-ratio: 3) { \n\n}\n\n\/* Portrait *\/\n@media only screen \n  and (min-device-width: 414px) \n  and (max-device-width: 736px) \n  and (-webkit-min-device-pixel-ratio: 3)\n  and (orientation: portrait) { \n\n}\n\n\/* Landscape *\/\n@media only screen \n  and (min-device-width: 414px) \n  and (max-device-width: 736px) \n  and (-webkit-min-device-pixel-ratio: 3)\n  and (orientation: landscape) { \n\n}\n\n\/* ----------- iPhone X ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media only screen \n  and (min-device-width: 375px) \n  and (max-device-width: 812px) \n  and (-webkit-min-device-pixel-ratio: 3) { \n\n}\n\n\/* Portrait *\/\n@media only screen \n  and (min-device-width: 375px) \n  and (max-device-width: 812px) \n  and (-webkit-min-device-pixel-ratio: 3)\n  and (orientation: portrait) { \n\n}\n\n\/* Landscape *\/\n@media only screen \n  and (min-device-width: 375px) \n  and (max-device-width: 812px) \n  and (-webkit-min-device-pixel-ratio: 3)\n  and (orientation: landscape) { \n\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          Galaxy Phones      <\/summary>\n  \n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* ----------- Galaxy S3 ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 640px) \n  and (-webkit-device-pixel-ratio: 2) {\n\n}\n\n\/* Portrait *\/\n@media screen \n  and (device-width: 320px) \n  and (device-height: 640px) \n  and (-webkit-device-pixel-ratio: 2) \n  and (orientation: portrait) {\n\n}\n\n\/* Landscape *\/\n@media screen \n  and (device-width: 320px) \n  and (device-height: 640px) \n  and (-webkit-device-pixel-ratio: 2) \n  and (orientation: landscape) {\n\n}\n\n\/* ----------- Galaxy S4, S5 and Note 3 ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media screen \n  and (device-width: 320px) \n  and (device-height: 640px) \n  and (-webkit-device-pixel-ratio: 3) {\n\n}\n\n\/* Portrait *\/\n@media screen \n  and (device-width: 320px) \n  and (device-height: 640px) \n  and (-webkit-device-pixel-ratio: 3) \n  and (orientation: portrait) {\n\n}\n\n\/* Landscape *\/\n@media screen \n  and (device-width: 320px) \n  and (device-height: 640px) \n  and (-webkit-device-pixel-ratio: 3) \n  and (orientation: landscape) {\n\n}\n\n\/* ----------- Galaxy S6 ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 640px) \n  and (-webkit-device-pixel-ratio: 4) {\n\n}\n\n\/* Portrait *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 640px) \n  and (-webkit-device-pixel-ratio: 4) \n  and (orientation: portrait) {\n\n}\n\n\/* Landscape *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 640px) \n  and (-webkit-device-pixel-ratio: 4) \n  and (orientation: landscape) {\n\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          HTC Phones      <\/summary>\n  \n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* ----------- HTC One ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 640px) \n  and (-webkit-device-pixel-ratio: 3) {\n\n}\n\n\/* Portrait *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 640px) \n  and (-webkit-device-pixel-ratio: 3) \n  and (orientation: portrait) {\n\n}\n\n\/* Landscape *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 640px) \n  and (-webkit-device-pixel-ratio: 3) \n  and (orientation: landscape) {\n\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          Google Pixel      <\/summary>\n  \n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* ----------- Google Pixel ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 640px) \n  and (-webkit-device-pixel-ratio: 3) {\n\n}\n\n\/* Portrait *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 640px) \n  and (-webkit-device-pixel-ratio: 3) \n  and (orientation: portrait) {\n\n}\n\n\/* Landscape *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 640px) \n  and (-webkit-device-pixel-ratio: 3) \n  and (orientation: landscape) {\n\n}\n\n\/* ----------- Google Pixel XL ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 640px) \n  and (-webkit-device-pixel-ratio: 4) {\n\n}\n\n\/* Portrait *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 640px) \n  and (-webkit-device-pixel-ratio: 4) \n  and (orientation: portrait) {\n\n}\n\n\/* Landscape *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 640px) \n  and (-webkit-device-pixel-ratio: 4) \n  and (orientation: landscape) {\n\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          Nexus Phones      <\/summary>\n  \n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* ----------- Nexus 4 ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media screen \n  and (device-width: 384px) \n  and (device-height: 592px) \n  and (-webkit-device-pixel-ratio: 2) {\n\n}\n\n\/* Portrait *\/\n@media screen \n  and (device-width: 384px) \n  and (device-height: 592px) \n  and (-webkit-device-pixel-ratio: 2)\n  and (orientation: portrait) {\n\n}\n\n\/* Landscape *\/\n@media screen \n  and (device-width: 384px) \n  and (device-height: 592px) \n  and (-webkit-device-pixel-ratio: 2)\n  and (orientation: landscape) {\n\n}\n\n\/* ----------- Nexus 5 ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 592px) \n  and (-webkit-device-pixel-ratio: 3) {\n\n}\n\n\/* Portrait *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 592px) \n  and (-webkit-device-pixel-ratio: 3)\n  and (orientation: portrait) {\n\n}\n\n\/* Landscape *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 592px) \n  and (-webkit-device-pixel-ratio: 3)\n  and (orientation: landscape) {\n\n}\n\n\/* ----------- Nexus 6 and 6P ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 592px) \n  and (-webkit-device-pixel-ratio: 4) {\n\n}\n\n\/* Portrait *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 592px) \n  and (-webkit-device-pixel-ratio: 4)\n  and (orientation: portrait) {\n\n}\n\n\/* Landscape *\/\n@media screen \n  and (device-width: 360px) \n  and (device-height: 592px) \n  and (-webkit-device-pixel-ratio: 4)\n  and (orientation: landscape) {\n\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          Windows Phone      <\/summary>\n  \n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* ----------- Windows Phone ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media screen \n  and (device-width: 480px) \n  and (device-height: 800px) {\n\n}\n\n\/* Portrait *\/\n@media screen \n  and (device-width: 480px) \n  and (device-height: 800px)  \n  and (orientation: portrait) {\n\n}\n\n\/* Landscape *\/\n@media screen \n  and (device-width: 480px) \n  and (device-height: 800px) \n  and (orientation: landscape) {\n\n}<\/code><\/pre>\n\n\n<\/details>\n\n<\/details>\n\n\n<details open>\n  <summary>\n          <h3>Laptops<\/h3>\n      <\/summary>\n  \n\n<p>Media Queries for laptops are a bit of a juggernaut. Instead of targeting specific devices, try specifying a general screen size range, then distinguishing between retina and non-retina screens.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* ----------- Non-Retina Screens ----------- *\/\n@media screen \n  and (min-device-width: 1200px) \n  and (max-device-width: 1600px) \n  and (-webkit-min-device-pixel-ratio: 1) { \n}\n\n\/* ----------- Retina Screens ----------- *\/\n@media screen \n  and (min-device-width: 1200px) \n  and (max-device-width: 1600px) \n  and (-webkit-min-device-pixel-ratio: 2)\n  and (min-resolution: 192dpi) { \n}<\/code><\/pre>\n\n\n<\/details>\n\n\n<details open>\n  <summary>\n          <h3>Tablets<\/h3>\n      <\/summary>\n  \n\n<details >\n  <summary>\n          iPad      <\/summary>\n  \n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* ----------- iPad 1, 2, Mini and Air ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media only screen \n  and (min-device-width: 768px) \n  and (max-device-width: 1024px) \n  and (-webkit-min-device-pixel-ratio: 1) {\n\n}\n\n\/* Portrait *\/\n@media only screen \n  and (min-device-width: 768px) \n  and (max-device-width: 1024px) \n  and (orientation: portrait) \n  and (-webkit-min-device-pixel-ratio: 1) {\n\n}\n\n\/* Landscape *\/\n@media only screen \n  and (min-device-width: 768px) \n  and (max-device-width: 1024px) \n  and (orientation: landscape) \n  and (-webkit-min-device-pixel-ratio: 1) {\n\n}\n\n\/* ----------- iPad 3, 4 and Pro 9.7\" ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media only screen \n  and (min-device-width: 768px) \n  and (max-device-width: 1024px) \n  and (-webkit-min-device-pixel-ratio: 2) {\n\n}\n\n\/* Portrait *\/\n@media only screen \n  and (min-device-width: 768px) \n  and (max-device-width: 1024px) \n  and (orientation: portrait) \n  and (-webkit-min-device-pixel-ratio: 2) {\n\n}\n\n\/* Landscape *\/\n@media only screen \n  and (min-device-width: 768px) \n  and (max-device-width: 1024px) \n  and (orientation: landscape) \n  and (-webkit-min-device-pixel-ratio: 2) {\n\n}\n\n\/* ----------- iPad Pro 10.5\" ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media only screen \n  and (min-device-width: 834px) \n  and (max-device-width: 1112px)\n  and (-webkit-min-device-pixel-ratio: 2) {\n\n}\n\n\/* Portrait *\/\n\/* Declare the same value for min- and max-width to avoid colliding with desktops *\/\n\/* Source: https:\/\/medium.com\/connect-the-dots\/css-media-queries-for-ipad-pro-8cad10e17106*\/\n@media only screen \n  and (min-device-width: 834px) \n  and (max-device-width: 834px) \n  and (orientation: portrait) \n  and (-webkit-min-device-pixel-ratio: 2) {\n\n}\n\n\/* Landscape *\/\n\/* Declare the same value for min- and max-width to avoid colliding with desktops *\/\n\/* Source: https:\/\/medium.com\/connect-the-dots\/css-media-queries-for-ipad-pro-8cad10e17106*\/\n@media only screen \n  and (min-device-width: 1112px) \n  and (max-device-width: 1112px) \n  and (orientation: landscape) \n  and (-webkit-min-device-pixel-ratio: 2) {\n\n}\n\n\/* ----------- iPad Pro 12.9\" ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media only screen \n  and (min-device-width: 1024px) \n  and (max-device-width: 1366px)\n  and (-webkit-min-device-pixel-ratio: 2) {\n\n}\n\n\/* Portrait *\/\n\/* Declare the same value for min- and max-width to avoid colliding with desktops *\/\n\/* Source: https:\/\/medium.com\/connect-the-dots\/css-media-queries-for-ipad-pro-8cad10e17106*\/\n@media only screen \n  and (min-device-width: 1024px) \n  and (max-device-width: 1024px) \n  and (orientation: portrait) \n  and (-webkit-min-device-pixel-ratio: 2) {\n\n}\n\n\/* Landscape *\/\n\/* Declare the same value for min- and max-width to avoid colliding with desktops *\/\n\/* Source: https:\/\/medium.com\/connect-the-dots\/css-media-queries-for-ipad-pro-8cad10e17106*\/\n@media only screen \n  and (min-device-width: 1366px) \n  and (max-device-width: 1366px) \n  and (orientation: landscape) \n  and (-webkit-min-device-pixel-ratio: 2) {\n\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          Galaxy Tablets      <\/summary>\n  \n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* ----------- Galaxy Tab 2 ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media \n  (min-device-width: 800px) \n  and (max-device-width: 1280px) {\n\n}\n\n\/* Portrait *\/\n@media \n  (max-device-width: 800px) \n  and (orientation: portrait) { \n\n}\n\n\/* Landscape *\/\n@media \n  (max-device-width: 1280px) \n  and (orientation: landscape) { \n\n}\n\n\/* ----------- Galaxy Tab S ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media \n  (min-device-width: 800px) \n  and (max-device-width: 1280px)\n  and (-webkit-min-device-pixel-ratio: 2) {\n\n}\n\n\/* Portrait *\/\n@media \n  (max-device-width: 800px) \n  and (orientation: portrait)\n  and (-webkit-min-device-pixel-ratio: 2) { \n\n}\n\n\/* Landscape *\/\n@media \n  (max-device-width: 1280px) \n  and (orientation: landscape)\n  and (-webkit-min-device-pixel-ratio: 2) { \n\n}<\/code><\/pre>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          Nexus Tablets      <\/summary>\n  \n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* ----------- Nexus 7 ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media screen \n  and (device-width: 601px) \n  and (device-height: 906px) \n  and (-webkit-min-device-pixel-ratio: 1.331) \n  and (-webkit-max-device-pixel-ratio: 1.332) {\n\n}\n\n\/* Portrait *\/\n@media screen \n  and (device-width: 601px) \n  and (device-height: 906px) \n  and (-webkit-min-device-pixel-ratio: 1.331) \n  and (-webkit-max-device-pixel-ratio: 1.332) \n  and (orientation: portrait) {\n\n}\n\n\/* Landscape *\/\n@media screen \n  and (device-width: 601px) \n  and (device-height: 906px) \n  and (-webkit-min-device-pixel-ratio: 1.331) \n  and (-webkit-max-device-pixel-ratio: 1.332) \n  and (orientation: landscape) {\n\n}\n\n\/* ----------- Nexus 9 ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media screen \n  and (device-width: 1536px) \n  and (device-height: 2048px) \n  and (-webkit-min-device-pixel-ratio: 1.331) \n  and (-webkit-max-device-pixel-ratio: 1.332) {\n\n}\n\n\/* Portrait *\/\n@media screen \n  and (device-width: 1536px) \n  and (device-height: 2048px) \n  and (-webkit-min-device-pixel-ratio: 1.331) \n  and (-webkit-max-device-pixel-ratio: 1.332) \n  and (orientation: portrait) {\n\n}\n\n\/* Landscape *\/\n@media screen \n  and (device-width: 1536px) \n  and (device-height: 2048px) \n  and (-webkit-min-device-pixel-ratio: 1.331) \n  and (-webkit-max-device-pixel-ratio: 1.332) \n  and (orientation: landscape) {\n\n}<\/code><\/pre>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          Kindle Fire      <\/summary>\n  \n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* ----------- Kindle Fire HD 7\" ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media only screen \n  and (min-device-width: 800px) \n  and (max-device-width: 1280px) \n  and (-webkit-min-device-pixel-ratio: 1.5) {\n\n}\n\n\/* Portrait *\/\n@media only screen \n  and (min-device-width: 800px) \n  and (max-device-width: 1280px) \n  and (-webkit-min-device-pixel-ratio: 1.5) \n  and (orientation: portrait) {\n}\n\n\/* Landscape *\/\n@media only screen \n  and (min-device-width: 800px) \n  and (max-device-width: 1280px) \n  and (-webkit-min-device-pixel-ratio: 1.5) \n  and (orientation: landscape) {\n\n}\n\n\/* ----------- Kindle Fire HD 8.9\" ----------- *\/\n\n\/* Portrait and Landscape *\/\n@media only screen \n  and (min-device-width: 1200px) \n  and (max-device-width: 1600px) \n  and (-webkit-min-device-pixel-ratio: 1.5) {\n\n}\n\n\/* Portrait *\/\n@media only screen \n  and (min-device-width: 1200px) \n  and (max-device-width: 1600px) \n  and (-webkit-min-device-pixel-ratio: 1.5) \n  and (orientation: portrait) {\n}\n\n\/* Landscape *\/\n@media only screen \n  and (min-device-width: 1200px) \n  and (max-device-width: 1600px) \n  and (-webkit-min-device-pixel-ratio: 1.5) \n  and (orientation: landscape) {\n\n}<\/code><\/pre>\n\n\n<\/details>\n\n<\/details>\n\n\n<details open>\n  <summary>\n          <h3>Wearables<\/h3>\n      <\/summary>\n  \n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* ----------- Moto 360 Watch ----------- *\/\n@media \n  (max-device-width: 218px)\n  and (max-device-height: 281px) { \n\n}<\/code><\/pre>\n\n\n<\/details>\n\n\n<details open>\n  <summary>\n          <h3>More on media queries<\/h3>\n      <\/summary>\n  \n\n<ul><li><a href=\"https:\/\/www.w3.org\/TR\/mediaqueries-3\/\" rel=\"noopener\">Media Queries Level 3<\/a> (W3C)<\/li><li><a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-css-media-queries\/\">A Complete Guide to CSS Media Queries<\/a> (CSS-Tricks)<\/li><li><a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/css-media-queries?utm_medium=content_acq&amp;utm_source=css-tricks&amp;utm_campaign=&amp;utm_content=awareness_bestsellers\" rel=\"noopener\">CSS Media Queries: Quick Reference &amp; Guide<\/a> (DigitalOcean)<\/li><\/ul>\n\n\n<\/details>","protected":false},"excerpt":{"rendered":"<p>This page lists a ton of different devices and media queries that would specifically target that device. That&#8217;s probably not generally a great practice, but it is helpful to know what the dimensions for all these devices are in a CSS context.<\/p>\n","protected":false},"author":2508,"featured_media":313085,"parent":3222,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"guide-special.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":18377,"url":"https:\/\/css-tricks.com\/lodge\/v10\/058-custom-header-for-the-gallery-part-2-with-reverso-media-queries\/","url_meta":{"origin":7667,"position":0},"title":"#058: Custom Header for The Gallery, Part 2 (with Reverso Media Queries)","date":"September 19, 2012","format":false,"excerpt":"We have the basic gallery header in place, but it's missing the little blue people that Erica put in the original illustration. We had talked about it in advance, and decided it would be pretty cool if when the screen was resized, the people would stay put as the gallery\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":191213,"url":"https:\/\/css-tricks.com\/snippets\/sass\/mixin-manage-breakpoints\/","url_meta":{"origin":7667,"position":1},"title":"Mixin to Manage Breakpoints","date":"December 19, 2014","format":false,"excerpt":"Responsive Web Design creations often exist over several different breakpoints. Managing those breakpoints is not always easy. Using them and updating them can sometimes be tedious. Hence the need for a mixin to handle breakpoint configuration and usage. Simple version First you need a map of breakpoints, associated to names.\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18134,"url":"https:\/\/css-tricks.com\/lodge\/v10\/016-using-media-queries-in-sass\/","url_meta":{"origin":7667,"position":2},"title":"#016: Using Media Queries in Sass","date":"September 9, 2012","format":false,"excerpt":"We introduce the concept of @media queries in CSS. A lot of what using Sass on this project allows us to do is stay DRY (don't repeat yourself). We did that setting color and size variables. We did that with our font stacks. Now we're doing it again with media\u2026","rel":"","context":"With 24 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3785,"url":"https:\/\/css-tricks.com\/snippets\/php\/get-all-time-number-of-mysql-queries\/","url_meta":{"origin":7667,"position":3},"title":"Get All-Time Number of MySQL Queries","date":"September 4, 2009","format":false,"excerpt":"Because the name of the global mysql-status-variable containing the number of queries changed in later versions of mysql, a helper-function is needed to detect the exact version of mysql you're running.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18383,"url":"https:\/\/css-tricks.com\/lodge\/v10\/060-custom-header-for-the-forums-part-2-rapid-media-queries\/","url_meta":{"origin":7667,"position":4},"title":"#060: Custom Header for The Forums, Part 2 (Rapid Media Queries)","date":"September 19, 2012","format":false,"excerpt":"Nick's illustration had three different layers for the heads. They are just slightly different variations. We could swap out the images with an animation or with JavaScript or something but having an always-running animation (or even one that runs every page load) would probably be mega-annoying for heavy forums users.\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20656,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/032-moving-the-home-nav-media-queries\/","url_meta":{"origin":7667,"position":5},"title":"#032 &#8211; Moving the Home Nav, Media Queries","date":"March 18, 2013","format":false,"excerpt":"We working on fixing up the site so that on \"desktop\" (i.e. larger) screens the site still looks good. The homepage navigation is another thing that gets a littler ridiculously large on desktop. So instead of doing that, we shift it over to the right side exposing a space on\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/7667"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=7667"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/7667\/revisions"}],"predecessor-version":[{"id":374108,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/7667\/revisions\/374108"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3222"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/313085"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=7667"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=7667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}