Media Queries

README.md

Media Queries

Media queries are used to set breakpoints for layout changes. While responsive design using flexbox and grid have reduced our need for media queries, they are still very important for complex and dynamic layouts.

Documentation

• Mdn Beginner's Guide to Media Queries
• CSS-Tricks Guide to Media Queries

Mobile or Desktop First?

• Media queries set breakpoints for how content is displayed
  • you can make very percise layout changes for different screen sizes
  • traditionally, css has been programmed for desktop design first and mobile layouts second
  • modern css aims to write for a mobile layout first, and then make exceptions for the desktop
    • hence mobile first
• Media queries give you the ability to serve specific changes for different aspect ratios. So everyone can enjoy your website.

Mobile first breakpoints

1. Determine the maximum screen size for a particular layout
2. Create a media query that kicks in at this screen size
3. Fill the media query with css declarations for the screen size range in question

Example Media Queries

• These layout changes could not be done in flex without media queries
• Use media queries for things that you cannot do with a responsive layout
• Always put media queries near the end of your css. -- They are overrides

index.html

<header>
  <h1>Main Title</h1>
</header>
<main>
  <aside>
    <h2>Aside Title</h2>
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </aside>
  <article>
    <h2>Article Title</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum est nesciunt, adipisci ipsum iure
      perspiciatis maxime nulla dignissimos distinctio vel!</p>
    <a href="#">Click</a>
  </article>
</main>

style.css

main, article {
  display: flex;
  flex-direction: column;
}
aside ul {
  display: flex;
  justify-content: space-around;
  gap: 20px;

  list-style-type: disc;
}

/* at 600px, the following properties will have these values */
@media screen and (min-width: 600px) {
  main {
    flex-direction: row;
  }
  aside ul {
    flex-direction: column;
    justify-content: flex-start;
  }
  article {
    justify-content: flex-start;
  }
}