Responsive Design Flashcards
1
Q
What is the viewport meta tag and why is it needed.
A
<head> <meta name="viewport" content="width=device-width,initial-scale=1" /> </head>
- Mobile browsers tend to lie about their viewport width.
- Tells mobile browsers that they should set the width of the viewport to the device width,
and scale the document to 100% of its intended size, which shows the document at the mobile-optimized
size that you intended.
2
Q
Media query: set some parameters when screen width is at least 80rem (only for regular browser view).
A
@media screen and (min-width: 80rem) {}
3
Q
What are breakpoints
A
The points at which a media query is introduced, and the layout changed
4
Q
Media query components
A
- A media type, which tells the browser what kind of media this code is for:
-
all(default) printscreen- A media expression, which is a rule, or test that must be passed for the contained CSS to be applied.
- A set of CSS rules that will be applied if the test passes and the media type is correct.
-
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}
