CSS Media Queries & Responsive Layout

Question 1

Give two examples of media features that you can query in an@mediarule.

Answer 1

Width, orientation

Question 2

Which HTML meta tag is used in mobile-responsive web pages?

Answer 2

Viewport meta tag

Question 3

What is abreakpointin responsive Web design?

Answer 3

Breakpoint is where the media query rule works on.

It is the line where we choose to restructure the layout

Question 4

What is the advantage of using a percentage (e.g.50%)widthinstead of a fixed (e.g.px)widthfor a “column” class in a responsive layout?

Answer 4

Percentage takes the screen width into consideration; pixels are static and stays the same regardless of adjusting the screen size.

Question 5

If you introduce CSS rules for a smallermin-widthafterthe styles for a largermin-widthin your style sheet, the CSS rules for thesmallermin-widthwill “win”. Why is that?

Answer 5

Because of CSS Cascade; specifically the source order component of the Cascade. Priority is given to CSS rules that are lower on the page.