WDD 131: Dynamic Web Fundamentals

CSS Media Queries

Overview

CSS Media Queries help web designers/developers show different styles for the content on various screen sizes. Designers use these queries to decide when to change the design or layout based on the content and set breakpoints, like the minimum screen width.

"Do NOT define breakpoints based on device classes. Defining breakpoints based on specific devices, products, brand names, or operating systems that are in use today can result in a maintenance nightmare. Instead, the content itself should determine how the layout adjusts to its container."
- How to choose breakpoints - Responsive Web - Google Web Fundamentals

Associated Course Learning Outcome(s)

Develop responsive web pages that follow best practices and use valid HTML and CSS.

Prepare

CSS media queries are essential to responsive web design. The @media at-rule specifies condition(s) to create a block of CSS rules that are applied if the condition(s) evaluates to true. This is extremely useful as selected elements can be repositioned, resized, hidden, exposed, etc. based upon the user's viewport size.

Here is the general syntax is setting up a CSS media query:

@media not|only mediatype and (expressions) {
  /* CSS rules go here inside the @media query's opening and closing curly brackets {} */
}

Here is an example CSS media query which could be embedded in a CSS file or be the entire contents of a CSS file if wanted. This example only has one CSS rule.

@media screen and (min-width: 640px) {
  h1 {
    font-size: 2.5rem;
    margin: 1rem;
    color: navy;
  }
}
Sample code explanation

1️⃣ The @media screen and (min-width: 640px) {is the signature line of the @media query block of CSS rules to be applied if the conditions are met. In this case the conditions are if the media type is a screen and the viewport minimum width is at least 640 pixels wide.

2️⃣ The h1 {is a heading 1 (<h1>) element selector which starts the defined CSS rule.

3️⃣-5️⃣ The @font-size: 2.5rem; margin: 1rem; color: navy; are declarations to be applied to any <h1> elements if the @media query conditions are met.

6️⃣ The first }closes the CSS rule for <h1> code elements.

7️⃣ The last }closes the media query.

⚠️ Note that curly brackets { } are used to contain a specific media query and are also used to define CSS Rules. Be sure to keep track of your bracket scope (start and end). Using automatic VS Code Format Document features will help you recognize issues with your structure.

Media Query Application Demonstration ~3 min

Design Considerations: The Viewport

Designing for A Viewport ~13:30 min | Designing for a Viewport Transcript

Activity Instructions

For this activity, you will create a simple HTML page with two CSS files. The first CSS file will be used to style the page for mobile devices. The second CSS file will be used to style the page for larger viewports. You will use CSS media queries to apply the appropriate CSS file based upon the viewport width.

Remember that a responsible use of an ♾️AI generative tool could be to ask questions about how to formulate a specific code piece. For example, "how to combine selectors in CSS", and an example will be given with which you can apply to your own code. Do not spin your tires in the mud so that you do not get stuck on a single requirement in the activity.

File and Folder Setup

  1. Add a new HTML file named "media-query.html" in a "week02" named folder all within your same wdd131 repo.
  2. Add two CSS files named "media-query.css" and "media-query-large.css" to an appropriate subfolder ("styles") within the week02 folder.

HTML

  1. In your media-query.html file, create a valid HTML page with standard head content including
    • Meta Charset Attribute
    • Meta Viewport Element
    • Title Element
    • Meta Description Element
    • Meta Author Element
    • Link to a Google Font named "Roboto" - regular 400.
    • Link references to your CSS two (2) files. Link the media-query.css file first.
    Example 
    <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WDD 131 - Media Query Example</title>
  <meta name="description" content="Media query learning activity example page.">
  <meta name="author" content="[Put your full name here]">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles/media-query.css">
  <link rel="stylesheet" href="styles/media-query-large.css">
</head>
  2. In the body of the HTML document, add a header with an h1, a main element with two section elements, and a footer element.
    1. The h1 element should contain the words "Media Query Example".
    2. Each section h2 heading contains a scripture with book, chapter, and verse.
    3. The section paragraph contains a copy of the actual scripture referenced in the heading.
    4. The footer should contain your name.
    Example 
    <header>
  <h1>Media Query Example</h1>
</header>
<main>
  <section>
    <h2>2 Nephi 32:9</h2>
    <p>But behold, I say unto you that ye must pray always, and not faint; that ye must not perform any thing unto the Lord save in the first place ye shall pray unto the Father in the name of Christ, that he will consecrate thy performance unto thee, that thy performance may be for the welfare of thy soul.</p>
  </section>
  <section>
    <h2>Helaman 12:24</h2>
    <p>And may God grant, in his great fulness, that men might be brought unto repentance and good works, that they might be restored unto grace for grace, according to their works.</p>
  </section>
</main>
<footer>
  [Your Full Name Here]
</footer>

CSS

  1. Style the document as shown in the example screenshots given below.
    1. media-query.css
      1. Do not include a media query.
      2. Use the Google Font - Roboto in the body rule.
      3. The header, main, and footer each
        1. have a maximum width of 640 pixels,
        2. are centered on the page using margin: 1rem auto,
        3. include a faint border,
        4. use appropriate padding, and
        5. have a blueish background color of your choice.

        Remember that you can combine these three selectors into one rule or create a class that contains these common CSS declarations.

      4. Declare the main element to be a CSS grid with a grid template of only one column, and a equal gap of 1rem, and

        If you had a question to pose to the class in Microsoft Teams, use specific and descriptive language, e.g., "I have a question about the media-query assignment part 5.1.4. I do not know how to set the main element grid to only one column with an even gap of 1rem."

      5. Declare the section elements to also have padding and a lighter or white background.
      Check Your Understanding 
      body {
  font-family: 'Roboto', sans-serif;
}

header, main, footer {
  max-width: 640px;
  margin: 1rem auto;
  border: 1px solid #bbb;
  padding: 1rem;
  background-color: #e6f2ff;
}

main {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}

section {
  padding: 1rem;
  background-color: #fff;
}
  2. In the media-query-large.css,
    1. Write a containing media query to be applied at a viewport width of 500px or greater. 
      @media screen and (min-width: 500px)
    2. Change through declaration within the media query the header to a black background with white text, and
    3. Change the main element to display two columns of equal size.
      Example 
      grid-template-columns: 1fr 1fr;

Example Screenshots

Screenshot of media query example in the mobile view.
Figure 1: Mobile View Screenshot
Screenshot of media query example in the large view
Figure 2: Wider View Screenshot

Testing

You should be continuously checking your browser rendered work using Live Server extension.

  1. Test your work by resizing your browser window or by using DevTools device settings to see the changes in the layout.
  2. Run through this Google CodeLab to test color contrast accessibility or use the CSS Overview to get a quick check on color contrast and other CSS usage.
  3. You will need to commit and push your work to your GitHub Pages enabled wdd131 site in order to use the Page Audit Tool.