CSS Media Query to affect all mobile devices

Question

I know that media queries affect the way mobile devices render the page on various screen sizes, but I want to know if there’s just one media query that can affect ALL mobile devices regardless of screen size?

I just want to make sure it won’t affect the Desktop.

For instance I want to tweak a navigation menu on all mobile devices, but I don’t want to meticulously change each media query that pertains to a screen size in my style.css.

I just want to create one media query to make this tweak that will affect all mobile screen sizes.

Answer 1

For anyone looking for a generic and easy media query for mobile, I would suggest the following:

@media screen and (max-width: 767px) {}

Similar to the suggestion by @m4n0, but this is the correct query including the "and". This is a good start, and then you can continue to define more breakpoints as you need more responsiveness along the way.

Answer 2

Your way sounds more complicated than it is. First, Desktop and Mobile can be the same at all. It only counts down to Media Queries. On a Desktop, your Browser can be have the same width as a mobile device. So you need to clarify in your Project at which point you want to show the User the "Mobile" Styles and when to display the "Desktop" Styles. In most Projects I worked or saw, the default Media Queries are something like that:

@media (min-width: 320px) {}
@media (min-width: 768px) {}
@media (min-width: 1024px) {}
@media (min-width: 1220px) {}
@media (min-width: 1440px) {}

So you see on every media query you can attach some new styles for the selected query size. To make its easier for writing styles and don't override all these things on every new width, you can make something like that:

@media (min-width: 320px) {} // for general stylings (both, mobile && desktop)
@media (max-width: 767px) {} // for only styles between 320px and 768px (most mobile devies)
@media (min-width: 768px) {}  // general desktop && tablet styles if needed
@media (min-width: 768px) and (max-width: 1024px) {} // only tablet styles
@media (min-width: 1025px) // start with desktop styling

All these styles between the media queries are only attached to the sizes. So just choose your needed width, for example:

All mobile styles attached only between 320px and 1024px

@media (min-width: 320px) and (max-width: 1024px) {
  .nav{ background: red; }
}

All desktop styles attached only after 1025px
@media (min-width: 1025px) {
  .nav{ background: green; }
}

All these media queries just show the different widths, you also can do this by heights, but its way more difficult because of the device/display sizes.

If you really want to check the User Agent and divide between the browser, agents, devices or something like that you will need JavaScript and thats way more complex than just display the styles for different widths.

If you have any questions about Media Queries and how to write them correctly, MDN is a good resource: MDN - Media Queries