Responsive Design Flashcards Preview

Frontend Developer Questions > Responsive Design > Flashcards

Flashcards in Responsive Design Deck (16):
1

What does the viewport do?

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

2

What are DIPs

Device
Independent
Pixels

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

3

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

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

4

What is the device pixel ratio?

With one dip for every n amount of hardware pixels

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

5

describe each line

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

6

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

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

7

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

tap targets can be a, nav, button

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

8

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

Linked CSS
many small http requests

@media
few big http requests

9

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

min-width
based on the browser window

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

10

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

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

11

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

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

12

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

65cpl
characters per line

13

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

font-size:16px;
line-height:1.2em;

14

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

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

15

raster vs vector images

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

16

What is the advantage of vector over raster?

The browser can render a vector image at any size