Foundation CSS Default Media Queries

Foundation CSS provides default media queries that enable responsive design and layout adjustments based on viewport size and device characteristics. These media queries allow developers to create flexible and adaptive web layouts that look great on various devices, from desktops to mobile devices. Here's an overview of Foundation CSS default media queries:

1. Small Screen (Mobile)

The small screen media query targets devices with small screens, such as smartphones. It applies styles when the viewport width is less than 640 pixels.

@media screen and (max-width: 640px) {
  /* Styles for small screens (mobile) */
  body {
    font-size: 14px;
  }
}

2. Medium Screen (Tablet)

The medium screen media query targets devices with medium-sized screens, such as tablets. It applies styles when the viewport width is between 641 pixels and 1024 pixels.

@media screen and (min-width: 641px) and (max-width: 1024px) {
  /* Styles for medium screens (tablet) */
  .container {
    max-width: 800px;
    margin: 0 auto;
  }
}

3. Large Screen (Desktop)

The large screen media query targets devices with large screens, such as desktop computers. It applies styles when the viewport width is greater than 1024 pixels.

@media screen and (min-width: 1025px) {
  /* Styles for large screens (desktop) */
  .header {
    padding: 20px;
  }
}

4. Extra Large Screen (Large Desktop)

The extra large screen media query targets devices with extra-large screens, such as large desktop monitors. It applies styles when the viewport width is greater than 1200 pixels.

@media screen and (min-width: 1200px) {
  /* Styles for extra large screens (large desktop) */
  .sidebar {
    width: 300px;
  }
}

Conclusion

Foundation CSS default media queries provide a convenient way to create responsive designs that adapt to different screen sizes and devices. By leveraging these media queries, developers can ensure that their web layouts look great and function well across a wide range of devices and viewport sizes.

Archive