css-responsive-layout Flashcards
What is a breakpoint in responsive Web design?
A breakpoint in responsive Web design is a point where the layout of the website begins to fail. Things are starting to breakout of their boxes or wrap onto new rows. The layout changes at these breakpoints to stop the website from breaking during resizing.
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?
The advantage of using a percentage width instead of a fixed width for a column class in a responsive layout is that it will scale with the viewport for a range of values and be more dynamic compared to pixel values. Pixel breakpoints require more media query breakpoints for it to look good.
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?
There is source order in CSS, if two properties are competing, the one lower down on the page has precedence and is applied. Media queries have to be in the same file as the rule it is modifying and farther down on the page.
