How to Create CSS Media Queries for Specific Screen Sizes?

Understanding CSS Media Queries for Responsive Layouts

The Problem:

Creating a website that adapts to a variety of screen sizes can be a challenge. Developers often struggle with the implementation of CSS media queries to achieve this responsiveness.

The Question:

A developer is seeking assistance in creating CSS media queries for a layout compatible with the following screen sizes:

• 640x480
• 800x600
• 1024x768
• 1280x1024 (and larger)

The Answer:

Media Queries for Specific Screen Sizes:

To create media queries for these specific screen sizes, utilize the following syntax:

@media screen and (max-width: 640px) {
  /* Styles for screens up to 640px wide */
}

@media screen and (max-width: 800px) {
  /* Styles for screens up to 800px wide */
}

@media screen and (max-width: 1024px) {
  /* Styles for screens up to 1024px wide */
}

@media screen and (min-width: 1280px) {
  /* Styles for screens 1280px wide and larger */
}

Additional Considerations:

• Use em values instead of pixels for better responsiveness.
• Consider using device-specific media queries (e.g., for iPhones, iPads) for optimal device compatibility.
• Refer to this comprehensive list of media queries for standard devices: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Example Usage:

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

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

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

/* Laptops and desktops ----------- */
@media screen and (min-width : 1224px) {
  /* Styles */
}

The above is the detailed content of How to Create CSS Media Queries for Specific Screen Sizes?. For more information, please follow other related articles on the PHP Chinese website!