Q: How do I target only iPads or specific Apple devices with media queries?

Targeting specific devices by their exact pixel dimensions is considered an industry anti-pattern and should be strictly avoided. Apple releases new devices with different screen resolutions every year, meaning your device-specific code will become obsolete incredibly quickly. Furthermore, features like Split View on the iPad mean the browser viewport might only be half or one-third of the physical screen width. You should always base your breakpoints on when your content breaks or looks visually unappealing, rather than trying to guess the hardware dimensions of the device rendering the page.

Q: Can I nest media queries inside other CSS rules?

Historically, standard CSS did not allow you to nest media queries inside CSS selectors; the media query had to wrap the selector. However, with the widespread adoption of CSS preprocessors like Sass and LESS, and the recent native implementation of CSS Nesting in all modern web browsers (as of 2023), you absolutely can. You can now write a .card class and place @media (min-width: 768px) { ... } directly inside the curly braces of that class. This highly recommended practice, known as colocation, makes your code significantly easier to read and maintain by keeping all styles for a single component in one unified block.

Q: What is the difference between @media screen and @media only screen?

The word only in a media query is a historical artifact designed to hide media queries from incredibly old, obsolete web browsers (like Internet Explorer 4 or Netscape Navigator). In the late 1990s, browsers that did not understand media queries would ignore the only keyword and fail to process the rest of the rule, preventing them from applying styles they couldn't handle properly. Today, every browser in existence fully supports media queries. Therefore, writing @media only screen and @media screen will produce the exact same result, and the only keyword can be safely omitted from modern development.

Question 1

Why are my media queries not working when I view my website on a mobile phone?

Accepted Answer

The almost universal cause of this issue is the omission of the HTML viewport meta tag. Early smartphones were designed to display old desktop websites by pretending their screens were 980 pixels wide and zooming out. If you do not include inside the of your HTML document, the mobile browser will ignore its true physical width. Consequently, your mobile-specific media queries (e.g., max-width: 600px) will never trigger because the phone is telling the browser it is 980 pixels wide.

Question 2

Should I use pixels, ems, or rems for defining my media query breakpoints?

Accepted Answer

Industry best practice dictates that you should use em units for media queries. While pixels are easier to conceptualize, they are absolute units that do not respect the user's browser settings. If a visually impaired user changes their default browser font size from 16 pixels to 24 pixels, pixel-based media queries will not adjust, resulting in text bleeding out of containers and overlapping. By using em units (where 1em equals the browser's default font size), your layout breakpoints will scale proportionally with the user's text preferences, ensuring strict compliance with web accessibility standards.

Question 3

What is the new range syntax for media queries, and why should I use it?

Accepted Answer

The CSS Media Queries Level 4 specification introduced a mathematical range syntax that replaces min-width and max-width with standard mathematical comparison operators like <, >, <=, and >=. Instead of writing @media (min-width: 768px) and (max-width: 1024px), you can write @media (768px <= width <= 1024px). This syntax is vastly superior because it is much easier to read, requires less code, and completely eliminates the overlapping breakpoint bugs that occur when developers accidentally use the exact same pixel value for both a min-width and max-width query.

Question 4

How do I target only iPads or specific Apple devices with media queries?

Accepted Answer

Targeting specific devices by their exact pixel dimensions is considered an industry anti-pattern and should be strictly avoided. Apple releases new devices with different screen resolutions every year, meaning your device-specific code will become obsolete incredibly quickly. Furthermore, features like Split View on the iPad mean the browser viewport might only be half or one-third of the physical screen width. You should always base your breakpoints on when your content breaks or looks visually unappealing, rather than trying to guess the hardware dimensions of the device rendering the page.

Question 5

Can I nest media queries inside other CSS rules?

Accepted Answer

Historically, standard CSS did not allow you to nest media queries inside CSS selectors; the media query had to wrap the selector. However, with the widespread adoption of CSS preprocessors like Sass and LESS, and the recent native implementation of CSS Nesting in all modern web browsers (as of 2023), you absolutely can. You can now write a .card class and place @media (min-width: 768px) { ... } directly inside the curly braces of that class. This highly recommended practice, known as colocation, makes your code significantly easier to read and maintain by keeping all styles for a single component in one unified block.

Question 6

What is the difference between @media screen and @media only screen?

Accepted Answer

The word only in a media query is a historical artifact designed to hide media queries from incredibly old, obsolete web browsers (like Internet Explorer 4 or Netscape Navigator). In the late 1990s, browsers that did not understand media queries would ignore the only keyword and fail to process the rest of the rule, preventing them from applying styles they couldn't handle properly. Today, every browser in existence fully supports media queries. Therefore, writing @media only screen and @media screen will produce the exact same result, and the only keyword can be safely omitted from modern development.

CSS Media Query Generator

Command Palette