Media Queries

Question 1

What is a media query?

Answer 1

A CSS3 module, allowing content rendering to adapt to certain conditions eg screen size.

Question 2

How do you add a media query in CSS

Answer 2

@media screen and (min-width xxxpx){

}

Question 3

What properties can be added into a media query?

Answer 3

1. Min/Max width
2. Height
3. Orientation
4. Aspect Ratio
5. Resolution

Question 4

What characters do you use to combine media queries?

Answer 4

The use of a ‘,’ (comma) means OR

‘and’ means BOTH

Question 5

Why is responsive design also good for developers?

Answer 5

Ability to code faster

Question 6

What is a breakpoint and why do we create a breakpoint?

Answer 6

Breakpoints are a points where the website responds according to the device width.
Breakpoints are created by allowing your browser to tell you when your layout breaks.

Question 7

Do background images change or are they fixed?

Answer 7

Background images do not change. Position of image controls here it is cropped.

Question 8

How do you make flexible images?

Answer 8

Give the image a width and percentage. (width is related to parent size)
Give them a min/max-width (this related to image size)

Question 9

Do background cover images change?

Answer 9

They do not change. It takes up the width at 100% but height can be cropped. Give a height to remove the crop.