- Learn media query
- Learn how to include Media queries to CSS files
- Learn how to change HTML element using CSS and media queries
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). It is a cornerstone technology of Responsive web design.
A media type can be declared in the head of an HTML document using the "media" attribute inside of a element.
Media attribute
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="my-style.css" />/* CSS media query within a stylesheet */
@media (max-width: 600px) {
.column {
color: blue;
}
}There are different types of medias such as TV, screen, or print, orientation of the scrren (landscape or portrait). We will concentrate on screen and width (max-width or min-width). You can find more information about it here
Take a look to some of the things that can be accomplished using Media Queries
When to use min and max with Media Queries
Use the "min-width" when you want styles to apply to elements based on the screen being AT LEAST the pixel width you set.
- Example: @media screen and (min-width: 480px) styles will apply when the screen width >= 480px.
Use the "max-width" when you want styles to apply to elements based on the screen being AT MOST the pixel width you set.
- Example: @media screen and (max-width: 479px) styles will apply when the screen width <= 479px.
Use both when you want styles to apply to elements based on a range of widths that you set between a min and max width.
- Example: @media only screen and (min-width:480px) and (max-width: 640px) styles will apply when the screen width is BETWEEN 480px and 640px.
- Notice the "only" here. It's different than the others. This is fine because it's optional. "Only" is basically blocking older browsers from seeing the style. [more info] (http://webdesign.about.com/od/css3/a/css3-media-queries.htm).
Developers and frameworks will most times use a combination of the above media queries to cover any screen size. I don't believe in screens with widths less than 10px, but I won't shove my beliefs down your throats.
Download this initial file and let's work together on it. This website look great on a large screen but we are having some difficulties when the size of the screen is smaller. We need to find out what CSS properties we need to change to make it work.
This exercise will consist on replicating the following webpage. You can download the project. Your media query will be @media (max-width: 640px) for the phone viewport.
Download the images here
| Target | Media query |
|---|---|
| Tablet | @media (min-width: 768px) and (max-width: 991px) { ... } |
| Phone | @media (max-width: 767px) { ... } |
