CSS Snippets: Media Queries

by Ran Enoch  –  follow on Twitter here

We’ve come to a point in web development where if you’re not creating or designing sites that are mobile friendly and responsive, you’re doing something wrong. Responsive design is no-longer optional, as more and more users continue to access the internet via their mobile devices. If you’re just getting started with mobile development (or even if you’ve been creating mobile web-apps for years), you may find this snippet of typical breaking points of different mobile devices super helpful to use in your media queries:

 

Join us in our newest publication:
< View plain text >
css

  1. /* Smartphones (portrait and landscape) ----------- */&lt;/code&gt;&lt;/p&gt;
  2. &lt;p class=&quot;line number2 index1 alt1&quot;&gt;&lt;code class=&quot;css plain&quot;&gt;@media only &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;screen&lt;/code&gt;&lt;/p&gt;
  3. &lt;p class=&quot;line number3 index2 alt2&quot;&gt;&lt;code class=&quot;css plain&quot;&gt;and (min-device-width : &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;320px&lt;/code&gt;&lt;code class=&quot;css plain&quot;&gt;) and (max-device-width : &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;480px&lt;/code&gt;&lt;code class=&quot;css plain&quot;&gt;) {&lt;/code&gt;&lt;/p&gt;
  4. &lt;p class=&quot;line number4 index3 alt1&quot;&gt;&lt;code class=&quot;css spaces&quot;&gt;  &lt;/code&gt;&lt;code class=&quot;css comments&quot;&gt;/* Styles */&lt;/code&gt;&lt;/p&gt;
  5. &lt;p class=&quot;line number5 index4 alt2&quot;&gt;&lt;code class=&quot;css plain&quot;&gt;}&lt;/code&gt;&lt;/p&gt;
  6. &lt;p class=&quot;line number6 index5 alt1&quot;&gt;&lt;/p&gt;
  7. &lt;p class=&quot;line number7 index6 alt2&quot;&gt;&lt;code class=&quot;css comments&quot;&gt;/* Smartphones (landscape) ----------- */&lt;/code&gt;&lt;/p&gt;
  8. &lt;p class=&quot;line number8 index7 alt1&quot;&gt;&lt;code class=&quot;css plain&quot;&gt;@media only &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;screen&lt;/code&gt; &lt;code class=&quot;css plain&quot;&gt;and (min-width : &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;321px&lt;/code&gt;&lt;code class=&quot;css plain&quot;&gt;) {&lt;/code&gt;&lt;/p&gt;
  9. &lt;p class=&quot;line number9 index8 alt2&quot;&gt;&lt;code class=&quot;css spaces&quot;&gt;  &lt;/code&gt;&lt;code class=&quot;css comments&quot;&gt;/* Styles */&lt;/code&gt;&lt;/p&gt;
  10. &lt;p class=&quot;line number10 index9 alt1&quot;&gt;&lt;code class=&quot;css plain&quot;&gt;}&lt;/code&gt;&lt;/p&gt;
  11. &lt;p class=&quot;line number11 index10 alt2&quot;&gt;&lt;/p&gt;
  12. &lt;p class=&quot;line number12 index11 alt1&quot;&gt;&lt;code class=&quot;css comments&quot;&gt;/* Smartphones (portrait) ----------- */&lt;/code&gt;&lt;/p&gt;
  13. &lt;p class=&quot;line number13 index12 alt2&quot;&gt;&lt;code class=&quot;css plain&quot;&gt;@media only &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;screen&lt;/code&gt; &lt;code class=&quot;css plain&quot;&gt;and (max-width : &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;320px&lt;/code&gt;&lt;code class=&quot;css plain&quot;&gt;) {&lt;/code&gt;&lt;/p&gt;
  14. &lt;p class=&quot;line number14 index13 alt1&quot;&gt;&lt;code class=&quot;css spaces&quot;&gt;  &lt;/code&gt;&lt;code class=&quot;css comments&quot;&gt;/* Styles */&lt;/code&gt;&lt;/p&gt;
  15. &lt;p class=&quot;line number15 index14 alt2&quot;&gt;&lt;code class=&quot;css plain&quot;&gt;}&lt;/code&gt;&lt;/p&gt;
  16. &lt;p class=&quot;line number16 index15 alt1&quot;&gt;&lt;/p&gt;
  17. &lt;p class=&quot;line number17 index16 alt2&quot;&gt;&lt;code class=&quot;css comments&quot;&gt;/* iPads (portrait and landscape) ----------- */&lt;/code&gt;&lt;/p&gt;
  18. &lt;p class=&quot;line number18 index17 alt1&quot;&gt;&lt;code class=&quot;css plain&quot;&gt;@media only &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;screen&lt;/code&gt; &lt;code class=&quot;css plain&quot;&gt;and (min-device-width : &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;768px&lt;/code&gt;&lt;code class=&quot;css plain&quot;&gt;) and (max-device-width : &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;1024px&lt;/code&gt;&lt;code class=&quot;css plain&quot;&gt;) {&lt;/code&gt;&lt;/p&gt;
  19. &lt;p class=&quot;line number19 index18 alt2&quot;&gt;&lt;code class=&quot;css spaces&quot;&gt;  &lt;/code&gt;&lt;code class=&quot;css comments&quot;&gt;/* Styles */&lt;/code&gt;&lt;/p&gt;
  20. &lt;p class=&quot;line number20 index19 alt1&quot;&gt;&lt;code class=&quot;css plain&quot;&gt;}&lt;/code&gt;&lt;/p&gt;
  21. &lt;p class=&quot;line number21 index20 alt2&quot;&gt;&lt;/p&gt;
  22. &lt;p class=&quot;line number22 index21 alt1&quot;&gt;&lt;code class=&quot;css comments&quot;&gt;/* iPads (landscape) ----------- */&lt;/code&gt;&lt;/p&gt;
  23. &lt;p class=&quot;line number23 index22 alt2&quot;&gt;&lt;code class=&quot;css plain&quot;&gt;@media only &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;screen&lt;/code&gt; &lt;code class=&quot;css plain&quot;&gt;and (min-device-width : &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;768px&lt;/code&gt;&lt;code class=&quot;css plain&quot;&gt;) and (max-device-width : &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;1024px&lt;/code&gt;&lt;code class=&quot;css plain&quot;&gt;) and (orientation : &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;landscape&lt;/code&gt;&lt;code class=&quot;css plain&quot;&gt;) {&lt;/code&gt;&lt;/p&gt;
  24. &lt;p class=&quot;line number24 index23 alt1&quot;&gt;&lt;code class=&quot;css spaces&quot;&gt;  &lt;/code&gt;&lt;code class=&quot;css comments&quot;&gt;/* Styles */&lt;/code&gt;&lt;/p&gt;
  25. &lt;p class=&quot;line number25 index24 alt2&quot;&gt;&lt;code class=&quot;css plain&quot;&gt;}&lt;/code&gt;&lt;/p&gt;
  26. &lt;p class=&quot;line number26 index25 alt1&quot;&gt;&lt;/p&gt;
  27. &lt;p class=&quot;line number27 index26 alt2&quot;&gt;&lt;code class=&quot;css comments&quot;&gt;/* iPads (portrait) ----------- */&lt;/code&gt;&lt;/p&gt;
  28. &lt;p class=&quot;line number28 index27 alt1&quot;&gt;&lt;code class=&quot;css plain&quot;&gt;@media only &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;screen&lt;/code&gt; &lt;code class=&quot;css plain&quot;&gt;and (min-device-width : &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;768px&lt;/code&gt;&lt;code class=&quot;css plain&quot;&gt;) and (max-device-width : &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;1024px&lt;/code&gt;&lt;code class=&quot;css plain&quot;&gt;) and (orientation : &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;portrait&lt;/code&gt;&lt;code class=&quot;css plain&quot;&gt;) {&lt;/code&gt;&lt;/p&gt;
  29. &lt;p class=&quot;line number29 index28 alt2&quot;&gt;&lt;code class=&quot;css spaces&quot;&gt;  &lt;/code&gt;&lt;code class=&quot;css comments&quot;&gt;/* Styles */&lt;/code&gt;&lt;/p&gt;
  30. &lt;p class=&quot;line number30 index29 alt1&quot;&gt;&lt;code class=&quot;css plain&quot;&gt;}&lt;/code&gt;&lt;/p&gt;
  31. &lt;p class=&quot;line number31 index30 alt2&quot;&gt;&lt;/p&gt;
  32. &lt;p class=&quot;line number32 index31 alt1&quot;&gt;&lt;code class=&quot;css comments&quot;&gt;/* Desktops and laptops ----------- */&lt;/code&gt;&lt;/p&gt;
  33. &lt;p class=&quot;line number33 index32 alt2&quot;&gt;&lt;code class=&quot;css plain&quot;&gt;@media only &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;screen&lt;/code&gt; &lt;code class=&quot;css plain&quot;&gt;and (min-width : &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;1224px&lt;/code&gt;&lt;code class=&quot;css plain&quot;&gt;) {&lt;/code&gt;&lt;/p&gt;
  34. &lt;p class=&quot;line number34 index33 alt1&quot;&gt;&lt;code class=&quot;css spaces&quot;&gt;  &lt;/code&gt;&lt;code class=&quot;css comments&quot;&gt;/* Styles */&lt;/code&gt;&lt;/p&gt;
  35. &lt;p class=&quot;line number35 index34 alt2&quot;&gt;&lt;code class=&quot;css plain&quot;&gt;}&lt;/code&gt;&lt;/p&gt;
  36. &lt;p class=&quot;line number36 index35 alt1&quot;&gt;&lt;/p&gt;
  37. &lt;p class=&quot;line number37 index36 alt2&quot;&gt;&lt;code class=&quot;css comments&quot;&gt;/* Large screens ----------- */&lt;/code&gt;&lt;/p&gt;
  38. &lt;p class=&quot;line number38 index37 alt1&quot;&gt;&lt;code class=&quot;css plain&quot;&gt;@media only &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;screen&lt;/code&gt; &lt;code class=&quot;css plain&quot;&gt;and (min-width : &lt;/code&gt;&lt;code class=&quot;css value&quot;&gt;1824px&lt;/code&gt;&lt;code class=&quot;css plain&quot;&gt;) {&lt;/code&gt;&lt;/p&gt;
  39. &lt;p class=&quot;line number39 index38 alt2&quot;&gt;&lt;code class=&quot;css spaces&quot;&gt;  &lt;/code&gt;&lt;code class=&quot;css comments&quot;&gt;/* Styles */&lt;/code&gt;&lt;/p&gt;
  40. &lt;p class=&quot;line number40 index39 alt1&quot;&gt;&lt;code class=&quot;css plain&quot;&gt;}&lt;/code&gt;&lt;/p&gt;
  41. &lt;p class=&quot;line number41 index40 alt2&quot;&gt; 
Use these media queries to make sure that your design is sized correctly and has the right breaking points for as many devices as possible!

Share and Enjoy !

0Shares
0 0