Media Queries

Question 1

How can we use media types

Answer 1

they can be an attribute on a link tag

e.g.

The can be an at-media block in a css files

@media print {
font-size: 12pt;
}

Question 2

What media types exist

Answer 2

all, braille, embossed, hand-held, print, projection, screen, speech, tty and tv

Question 3

What’s the structure of the media query

Answer 3

You specify the media then the query

e.g. @media screen and (min-width: 1024px) {

}

Question 4

What are alternatives to @-media blocks in your css

Answer 4

You can query a media attribute on a link

If importing a stylesheet those can be queries

@import url(‘wide.css’) screen and (min-width: 1024px);

Question 5

What’s meant by the following terms:
display area
rendering surface

Answer 5

display area - the viewport. Size of browser window miss chrome
rendering surface - size of screen

Question 6

True of false. You can’t query multiple features at once.

Answer 6

False. This is perfectly legal. You just join the extra features preceded with an and

@media screen and (min-width: 480px) and (orientation: landscape) {

}

Question 7

What’s the difference between width and device-width

Answer 7

width - the viewport. Browser window / display area

device-width - rendering surface / screen size

Question 8

What’s the meta viewport tag about?

Answer 8

The iPhone rendered content 980px wide (yet the viewport was 320 pixels wide). The content is rendered and then shrunk down.

Question 9

How do we write a meta tag to tell the browser to render on a one to one basis

Answer 9

initial scale sets the zoom to a 100%

By setting width to device width we make the width of the browser viewport equal to the screen size. e.g. makes the iOS device display at device width

Question 10

What does the following media query mean

@media screen and (max-width: 768px)

Answer 10

Any screen device with a screen 768 pixels wide or less apply these rules

Question 11

True or false. If I update a selector in my new @media rule this will overwrite all the properties in an earlier rule (i.e. even if I don’t write a rule to change a property stated earlier)

Answer 11

False

Question 12

How can we ensure our designs will work ok on devices that don’t support media queries or have javascript disabled?

Answer 12

Adopt a mobile first approach.

Define a view for small screen first and then use media queries to scale up the design.

Ties in with idea of progressive enhancement.