Media Queries

Question 1

What are some common breakpoints?

Answer 1

0 px - 480 px = small phones

480 px - 768 px = portrait tablet

768 px - 1024 px = landscape tablet

1024px - 1200px = regular computer

Question 2

What do you need to know about cross browser compatibility?

Answer 2

You need to use css browser prefixes.

CSS prefixes:

android: -webkit-
chrome: -webkit-
firefox: -moz-

internet explorer: -ms-

ios: -webkit-
opera: -o-
safari: -webkit-

Example for border-radius:

• webkit-border-radius: 25px;
• moz-border-radius: 25px;
• o-border-radius: 25px;

border-radius: 25px;

Question 3

What is the extension in brackets that can help us with browser prefixes?

Answer 3

Autoprefixer

Question 4

What are the three js scripts we need for older browsers?

Answer 4

Go to jsdelivr.com