From the course: Responsive Layout
Unlock the full course today
Join today to access over 23,400 courses taught by industry experts.
Media queries - HTML Tutorial
From the course: Responsive Layout
Media queries
- [Instructor] With a responsive website, you're usually going to change the layout of the page depending on the width of the user's viewport. Often we'll change the number of columns or move things around on the page but even with a very basic one-column site, you're still going to want to change things like line length to make sure the layout still looks good on any viewport size. The way we tell the browser to do something different based on the viewport width is through media queries. A media query is just like it sounds, a query or a question about the media that the webpage is being displayed on. The answer determines whether a section of CSS is applied when rendering the page. In CSS, media queries always start out with outside media followed by the actual query. So for example, here we have a page that's just an empty page with nothing in the body but I'm going to use a media query to change the background color of the page. So I'm going to start with @media and then I have…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.