Media Queries

Question 1

Create a media query that sets the body element’s background color to #FF6347 and its text color to white if the viewport width is 768px or less.

Answer 1

@media screen and (max-width: 768px) {
  body {
    background: #FF6347;
    color: #FFF;
  }
}

Question 2

Create a new media query that sets the body element’s background color to #4682B4 if the viewport width is 480px or less.

Answer 2

@media screen and (max-width: 480px) {
  body {
    background: #4682B4;
  }
}

Question 3

Create a new media query that sets the width of .wrap to 700px if the viewport is 800px or wider.

Answer 3

@media screen and (min-width: 800px) {
  .wrap {
    width: 700px;
  }
}

Question 4

Create a media query that floats the .col elements left if the viewport is 481px or wider.

Answer 4

@media screen and (min-width: 481px) {
  .col {
    float: left;
  }
}

Question 5

Create a new media query that floats .logo left and .main-nav right if the viewport is 769px or wider and a new property inside the .extra rule that displays it as a block element.

Answer 5

@media screen and (min-width: 769px) {
  .logo {
    float: left;
  }
  .main-nav {
    float: right;
  }
  .extra {
    display: block;
  }
}

Question 6

Create a new media query that sets the width of .wrap to 980px if the viewport is 1000px or wider.

Answer 6

@media screen and (min-width: 1000px) {
 .wrap {
   width: 980px;
 }
}

Question 7

Y/N: Does the ‘orientation’ media feature only work on mobile devices?

Answer 7

No, it affects all devices including desktop browsers.

Question 8

How do we determine the ‘resolution’ value in dpi or ppi?

Answer 8

Multiply the device-pixel-ratio by 96

Question 9

What media feature checks for the full screen width of a device?

Answer 9

device-width

Question 10

What meta tag instructs a device to zoom its layout viewport to 100% the device width?

Answer 10

(meta name=”viewport” content=”width=device-width”)

Question 11

If a device has a pixel-ratio of 2, then 1 CSS pixel is displayed as _____ physical pixel(s) on screen.

Answer 11

2

Question 12

A device-pixel-ratio of 2 is equivalent to a resolution value of _____ dpi.

Answer 12

192

Question 13

A device-pixel-ratio of 1 is equivalent to a resolution value of _____ dpi.

Answer 13

96

Question 14

Commas “,” between media query lists behave like what?

Answer 14

The “or” operator

Question 15

What media type do we need to use for paged media?

Answer 15

@media print

Question 16

To set margins around a printed page, we’ll need to use the _____ at-rule.

Answer 16

@page

Question 17

What pseudo-class will add the styles defined only to the first printed page?

Answer 17

@page:first

Question 18

At the very least, we should set all ‘background’ values to _____, and ‘color’ values to _____.

Answer 18

transparent, black

Question 19

What elements are usually not suitable for print?

Answer 19

site navigation, comments section, search, and “signup” form fields

Question 20

How do we make a link printer friendly?

Answer 20

display the full URL of the link next to the link text