How to Target Specific Screen Sizes or Devices with CSS ?

In Responsive Web Design, it's crucial to create websites that look great and function well on a variety of devices and screen sizes. CSS media queries are a powerful tool for achieving this. It allows you to apply different styles based on specific conditions such as screen size, resolution, or orientation. In this article, we will explore how to target specific screen sizes or devices with CSS.

Using Media Queries

Media queries are the cornerstone of responsive design, enabling you to create different layouts for different screen sizes.

Syntax

The basic syntax of a media query looks like this:

@media (condition) {
 /* CSS Styles */
}

Example: Targeting Screen Width

To apply styles for devices with a screen width of 768 pixels or less (e.g., tablets and mobile phones), you can use the following media query:

@media (max-width: 768px) {
 body {
 // CSS Styles
 }
}

Example: Targeting Screen Height

Similarly, you can target devices based on their screen height:

@media (max-height: 500px) {
 body {
 /* CSS Styles */
 }
}

Example: Combining Conditions

You can also combine multiple conditions using and to target devices that meet all specified criteria:

@media (max-width: 768px) and (orientation: portrait) {
 body {
 /* CSS Styles */
 }
}

Using Device Pixel Ratio

Device pixel ratio (DPR) is another factor you can target, especially for high-resolution displays like Retina screens. Here's how you can apply styles for devices with a DPR of 2 or higher:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 /* High-resolution styles */
}

Example:

Output

👁 media-query