Responsive css styles on mobile devices ONLY

by

Why not use a media query range.

I’m currently working on a responsive layout for my employer and the ranges I’m using are as follows:

You have your main desktop styles in the body of the CSS file (1024px and above) and then for specific screen sizes I’m using:

@media all and (min-width:960px) and (max-width: 1024px) {
  /* put your css styles in here */
}

@media all and (min-width:801px) and (max-width: 959px) {
  /* put your css styles in here */
}

@media all and (min-width:769px) and (max-width: 800px) {
  /* put your css styles in here */
}

@media all and (min-width:569px) and (max-width: 768px) {
  /* put your css styles in here */
}

@media all and (min-width:481px) and (max-width: 568px) {
  /* put your css styles in here */
}

@media all and (min-width:321px) and (max-width: 480px) {
  /* put your css styles in here */
}

@media all and (min-width:0px) and (max-width: 320px) {
  /* put your css styles in here */
}

This will cover pretty much all devices being used – I would concentrate on getting the styling correct for the sizes at the end of the range (i.e. 320, 480, 568, 768, 800, 1024) as for all the others they will just be responsive to the size available.

Also, don’t use px anywhere – use em’s or %.

More Related Contents:

  1. Why does the order of media queries matter in CSS?
  2. Common breakpoints for media queries on a responsive site
  3. Should I use max-device-width or max-width?
  4. Common CSS Media Queries Break Points [duplicate]
  5. What are the rules for CSS media query overlap?
  6. CSS media queries – Order matters?
  7. Which are the most important media queries to use in creating mobile responsive design?
  8. How to make responsive table [closed]
  9. How to code CSS media queries targeting ALL mobile devices and tablets?
  10. How can I avoid media query overlap?
  11. Bootstrap – Removing padding or margin when screen size is smaller
  12. Single vs multiple stylesheets in responsive web design
  13. Media Queries – Mobile vs Desktop Browser
  14. Making an iframe responsive
  15. Media query to detect if device is touchscreen
  16. CSS media query to target only iOS devices [duplicate]
  17. What does @media screen and (max-width: 1024px) mean in CSS?
  18. Responsive CSS triangle with percents width
  19. CSS native variables not working in media queries
  20. Swap DIV position with CSS only
  21. Extending selectors from within media queries with Sass
  22. Responsive Images with CSS
  23. What can be other ways than @media to make a website responsive suitably if I don’t mention target resolution? [closed]
  24. IE7, IE8 support for css3 media query [duplicate]
  25. Maintain div aspect ratio according to height
  26. Max-Width vs. Min-Width
  27. how to make responsive website for all devices [closed]
  28. Set div height equal to screen size
  29. iPhone X / 8 / 8 Plus CSS media queries
  30. @media query not working in mobile. Works fine in Chrome

Leave a Comment