Creating MEDIA QUERY BREAKPOINTS with CSS

Показать описание

TRANSCRIPT

What I'm gonna do here, this is inside the head area, is I'm gonna open angle bracket, meta, followed by a space and then name equals. And then in quotes, viewport. And then outside of the closing quote there, throw in a space. And I'm gonna go content equals, and then I'm gonna open up another pair of quotes. And then let's go width=device-width followed by a comma and a space. And then initial-scale=1, just like that. And then close off your angle bracket. This is a self-closing tag here. So again, you and I could get into a pretty lengthy and detailed conversation about what exactly is going on here but the most important thing here is essentially, what we're doing is we're turning off this thing called browser zoom or mobile browser scaling, ensuring that our media queries are going to work and function properly. What's the second step? Well, the second step is gonna be to establish our media query breakpoints. And what I'm gonna do here, and I should have mentioned this earlier is I'm gonna build everything here with you inside of an internal style sheet. The first thing that I'm gonna do here is I'm gonna blow out my default browser margins here, so I'm just gonna type in an asterisk here and then a pair of curly braces. And I'm gonna say margin: 0 followed by a semicolon. No big deal, this is something that I do all the time. The next thing that I'm gonna do is I'm gonna go and set a body rule here. So body and then a pair of squiggly brackets. And I'm gonna say background. And I'm gonna use my RGBA color value. And here's what I'm gonna specify. I'm gonna go 255,0,0,.25.