Responsive Media Queries for All Devices

Responsive Media Queries for All Devices
Code Snippet:Media Queries for Standard Devices
Author: amm
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 652
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X