Responsive Media Queries for All Devices

This code provides responsive media queries for various devices, ensuring optimal display on different screen sizes. It sets styles based on device width and orientation, making your website adaptable for smartphones, iPads, desktops, and large screens. It’s helpful for creating a user-friendly interface across all devices.

You can use this code in your website’s CSS to create a responsive design that adapts to various devices. It simplifies cross-device compatibility, saving time and effort in web development.

How to Use Responsive Media Queries For All Devices

Copy the following code and paste it into your website’s CSS file, typically named “style.css.”

/**
 * https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
 *
 *
 */

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

The code consists of multiple media queries, each targeting specific device widths and orientations. Let’s break it down:

• Smartphones (portrait and landscape): Adjust styles for screens between 320px and 480px.
• iPads (portrait and landscape): Customize layouts for devices between 768px and 1024px.
• Desktops and laptops: Modify designs for screens wider than 1224px.
• Large screens: Enhance the display for screens wider than 1824px.
• iPhone 4: Fine-tune styles for high-resolution screens.

Within each media query block, you can add CSS rules to adapt your website’s appearance as needed. For example, to change the font size for smartphones in portrait mode, you would add your styles within the corresponding block:

@media only screen and (max-width: 320px) {
  /* Your custom styles for smartphones in portrait mode */
  font-size: 16px;
}

That’s all! hopefully, you have successfully integrated these responsive media queries for all devices into your project. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.