I am brushing up on my CSS and currently taking a Frontend Udacity course.
It is nice to be able to go back over what we learned at Flatiron bootcamp, but also I realize, there is so much that I never knew about CSS.
Media queries are super cool!
A cardinal rule I learned about creating responsive web layouts, is to design for the smallest screen first.
A media query is a rule you can add to your CSS that changes the style of CSS according to the screen size.
For example if I want to create a layout for a small screen I can say
@media(min-width:700px){body { background-color: blue;}
Now when the screen width is greater than 700px it will change the background to blue.
In reality what media queries are useful for are changing font size, margins, and the display styles.
It is important to think about how the screen size changes what you want the user to see.
Top comments (0)