Deck 12: Responsive Web Design

Question 1

You should  design responsively for the needs of the device rather than those of the content.

Answer 1

False

Question 2

One technique for adapting to different browser widths is to use the display property  to remove or add content as needed.

Answer 2

True

Question 3

In the earlier days of the web, designers created browser specific web pages to deal with different browser types.

Answer 3

True

Question 4

Which statement correctly uses an import rule to apply an external style if the device screen has a maximum width of 480 pixels?

A) @url import("mobiledevice.css") screen and (max-width: 480px);
B) @import url("mobiledevice.css") screen and (max-width: 480px);
C) @screen import("mobiledevice.css") and (max-width: 480px);
D) @import screen and (max-width: 480px) u rl = "mobiledevice.css";

Question 5

The embossed media type is intended for paged material and for documents viewed in print preview mode.

Question 6

The srcset attribute of the < text > element supports the use of different fonts for the same text.

Question 7

To adapt your design for optimal viewing on several ranges of screen sizes what should you choose?

A) a fixed height
B) a breakpoint
C) a flexible pixel size
D) a static width

Question 8

Which of the following is NOT one of the three main elements of responsive design?

A) HTML5 auto adapation
B) CSS media queries
C) flexible images
D) flexible layouts

Question 9

Which CSS3  media type is intended for Braille tactile feedback devices?

A) embossed
B) tty
C) braille
D) speech

Question 10

Which measurement is best to use for breakpoints when you are most concerned with flexibility?

A) ems
B) points
C) pixels
D) inches

Question 11

Min-width and max-width style properties are often used to control the limits of the flexible design.

Question 12

Which CSS3 media type is similar to the CSS2 media type named aural?

A) speech
B) braille
C) voice
D) tty

Question 13

Which style sheet switching technique can let web designers use one set of content for multiple destinations?

A) media styles
B) conditional styles
C) dependent styles
D) switching styles

Question 14

Media queries let you create more precise rules for destination media.

Question 15

Which statement is a media query that sets the media type to screen and the maximum width to 480 pixels?

A) #media width 480px (@screen)
B) @width 480px and (media screen)
C) #screen media = max-width 480px
D) @media screen and (max-width: 480px)

Question 16

A display width of 500 pixels is approaching smartphone size.

Question 17

Which icon has become a universally accepted menu icon?

A) hot dog
B) sausage
C) hamburger
D) patty

Question 18

Redesigning the look of the site makes your content instantly adaptable  to multiple devices.

Question 19

The point at which design layouts change in responsive design schemes is called the transition point.

Question 20

Which CSS3 media type is intended for color desktop or handheld devices?

A) desktop
B) handheld
C) all
D) screen

Question 21

Which statement creates a responsive image style rule?

A) img { max-width: 100%; height: auto; }
B) img {  max-width: auto;  height: screen-width;  }
C) screen {  img-width: 100%;  height: 100%;  }
D) screen {  img-width: auto;  height: 100%;  }

Question 22

Which CSS3 media feature might have a value of 1024 x 768?

A) aspect-ratio
B) grid
C) color-index
D) resolution

Question 23

If you want to target a specific device when building responsive web pages, which media feature should you use?

A) width
B) screen-width
C) browser-width
D) device-width

Question 24

Which CSS3 media feature can have a value of Progressive or Interlace?

A) scan
B) orientation
C) grid
D) color

Question 25

Which pixel range accommodates smartphones and many tablets?

A) 780-1220
B) 0-780
C) 350-960
D) 960-1500

Question 26

The point at which design layouts change in responsive design schemes is called the ______________.

Question 27

Which statement will hide the article element?

A) display { article: none; }
B) article { display: hidden; }
C) display { article: hidden; }
D) article { display: none; }

Question 28

Which CSS3 media feature can have a value of portrait or landscape?

A) scan
B) orientation
C) aspect-ratio
D) grid

Question 29

Which W3C standards-based solution solves the problem of using different files for the same image based on the device's needs?

A) srcset attribute for the < img > element
B) multi-img attribute for the screen type
C) url attribute for the < img > element
D) multi-img attribute for the device type

Question 30

Which dimension most commonly needs to be constrained when building responsive web pages?

A) height
B) length
C) width
D) pixels

Question 31

Using ___________________________, you can apply styles based on display device characteristics.

Question 32

A technique for adapting to different browser widths is to use the ____ property to remove or add content as needed.

A) article
B) display
C) optional
D) content

Question 33

In the past, designers used _________ designs that always appeared in the center of the browser window. 

Question 34

Which CSS3 media feature might have a value of 16/9?

A) resolution
B) aspect-ratio
C) color-index
D) orientation

Question 35

Which of the following statements tells the device to treat the actual device width as the browser window width?

A) < content="viewport  name="width-device", initial-scale=0" >
B) < meta="width-device" content="viewport, initial-scale=1.0" >
C) < meta name="viewport" content="width=device-width, initial-scale=1.0" >
D) < name="width" content="width=device-width, initial-scale=0" >

Question 36

By combining the techniques of flexible layouts with the power of ____, you can extend the use of flexible layouts to adapt to any device size.

A) media queries
B) min-width, max-width
C) CSS3 features
D) style properties

Question 37

_______________ layouts realign elements of your content structure based on the device display.

Question 38

Which CSS3 media type is intended for devices that have a fixed-pitch character grid?

A) tty
B) tv
C) screen
D) handheld

Question 39

You can wrap text around an image in a responsive column by ____ the image and setting a width for the image that is a percentage of the containing column.

A) securing
B) anchoring
C) floating
D) inserting

Question 40

You should design _______________ for the needs of the content rather than those of the device.

Question 41

What is the concept of 'content-first designs?'What questions must you ask when applying this concept?

Question 42

Describe media queries and give a simple code example of using them.

Question 43

Briefly describe the three main elements of responsive design.

Question 44

The __________ media type is suitable for any type of device.

Question 45

You can use __________ types to specify a style rule for each type of destination.

Question 46

In CSS3, media types have been expanded into media __________, which let you create more precise rules for destination media.

Question 47

Breakpoints can be measured in ________, which is a better choice than pixels since they are more flexible.

Question 48

Describe breakpoints and how you use them.

Question 49

The key concept to remember is that the __________, not the device needs, should dictate when you add abreakpoint.

Question 50

Describe how and why responsive web design was developed.