Responsive Design

Question 1

What does the viewport do?

Answer 1

defines the area of the screen the browser can render content to

Question 2

What are DIPs

Answer 2

Device
Independent
Pixels

Number of pixels relating to a real distance, regardless of the pixel density on the screen

Question 3

What does the browser do if the viewport is not set?

Answer 3

It will size the viewport to be 980px (dips) wide

it will also do something called font boosting. font boosting is when a browser tries to pick which elements on the page are important and then scales them up

Question 4

What is the device pixel ratio?

Answer 4

With one dip for every n amount of hardware pixels

With one dip for every two hardware pixels, the device pixel ratio is 2!

Question 5

describe each line

Answer 5

A viewport element gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. 1 means that we are instructing the browser to have a 1 to 1 relationship between device independent pixels and css pixels

Question 6

How would you prevent video, object, img, and embed content from spreading wider than the container?

Answer 6

img, object, video, embed {
max-width: 100%;
}

Question 7

how should you set your “tap targets” on you page using css?

tap targets can be a, nav, button

Answer 7

nav, a, button{
min-width: 48px;
min-height: 48px;
}

Question 8

What is the difference between implementing media queries through a linked css style sheets versus @media requests in the same style sheet?

Answer 8

Linked CSS
many small http requests

@media
few big http requests

Question 9

What is the difference between media queries with min-width versus min-device-width

Answer 9

min-width
based on the browser window

min-device-width
based on the size of the screen

Question 10

How would you write a media query that turns the background red at 400px and below?

Answer 10

@media screen and (max-width: 400px) {
        body {
			background-color: red;
			}
      }

Question 11

How would you apply styles between 301px and 600px using media queries

Answer 11

@media screen and (min-width:301px) and (max-width: 600px){…}

Question 12

About how many characters per line of text should you aim for?

Answer 12

65cpl

characters per line

Question 13

What is the a good place to start for font-size and line-height for font?

Answer 13

font-size:16px;

line-height:1.2em;

Question 14

How would you give two images side by side with 50% width a 10px margin between them?

Answer 14

img{
width: calc((100%-10px)/2)
}

Question 15

raster vs vector images

Answer 15

raster
images represented a grid with dots of color
canvas element, photo

vector
made up of curves, lines, fill colors, shapes, and gradients
svg
svg makes it possible for responsive vector graphics

Question 16

What is the advantage of vector over raster?

Answer 16

The browser can render a vector image at any size