about this tutorial
Goal
The objective of this tutorial is to teach you how to incorporate CSS3 Media Queries on webpages, which will make your make your site to responsive to the user's browser.
Lessons
This tutorial will teach users the functionality and how to properly use the following in CSS3 Media Queries:
@Media
Media Types
Media Features
Media Queries Application
Prerequisite
For this tutorial, you will need to know all the basic fundamentals of HTML and CSS. If you don’t remember or feel you are ready, please review the pervious website here.
What are CSS3 Media Queries?
Screen resolution is important to all users. Because, as we all know, users are not confined to viewing webpages only on desktops or laptops anymore. Thus, Web developers must take users’ smart phones and tablets into account when constructing a site. Developers can accomplish this goal using CSS. This method that enables developers to adapt to the user’s screen is CSS3 Media Queries.
CSS3 Media Queries allows web developers incorporate automatic sizing techniques into the style sheet. The CSS selector you will learn about is media screen. Also, learning how to adjust your webpage in accordance with whatever device the user is using.
Check out these examples to see CSS3 Media Queries in action.
@media
This selector is crucial as it is the only method that will let your stylesheet have multiple CSS rules for several forms of media. Every media queries must start with @Media
Example:
@media {
}
ccs3 media types
In conjunction with @media, Media types permit webpages to display a specific layout depending on the screen resolution. The particular media type that we will focus in this tutorial is Screen.
All: Refers to all forms of media devices.
Aural: Refers to devices with speech and sound synthesizer capabilities.
Braille: Refers to devices with touchscreen capabilities.
Handheld: Refers to handheld devices like smartphones (note: this may not be necessary, since you can use screen instead).
Print: Refers to the screen when in print preview mode.
Projection: Refers to a projection screen.
Screen: Refers to the computer screen on the user’s device.
TV: Refers to television screen.
Example:
@media screen {
}
ccs3 media keywords
Media keywords can connect all of the media types and features together and make browsers recognize the conditions that you have set. After typing a keyword, insert open and closed parentheses, this will be used for media features. The following are the most common keywords used:
And: Can unite all conditions (media types with the features) into one media query and must return true for the browser to use the stylesheet.
Or: Sets the stipulation for the browser to use the stylesheet, if at least one condition returns true.
Not: : Sets the stipulation that all conditions will return true but anything after will return false.
Only: Tells older browsers not to display the media features.
Example:
@media screen only () {
}
ccs3 media features
With these features, developers can set the height and width for the user’s optimal viewing. To use media features, just enclose them inside the open and closed parentheses. The following are most used media features:
min-width: This will set the browser screen’s width no less than the designated minimum.
max-width : This will set the browser screen’s width no less than the designated maximum.
min-height : This will set the browser screen’s height no less than the designated minimum.
max-height: This will set the browser screen’s height no less than the designated maximum.
min-device-width: This will set the width of device screen no less than the designated minimum.
max-device-width : This will set the width of device screen no less than the designated minimum.
Example:
@media screen (min-width:650px) {
}
ccs3 @media
Now that you know about media rules, keywords, and features, this is how a media query should consist of:
media keyword type (feature: px or em)
So for instance, if you want to have the body background of the page change color from green to red, only when the screen is at minimum of 650px, then the CSS code should look as followed:
body {
color: #EC0B19
}
@media screen (min-width:650px) {
body {
color: #07B526
}
}
css3 media queries application
Before you start practicing media quires, it is important to know that developers can apply Media queries with different methods. You can utilize Media Queries internally by using the <style> tag, if you need a refresher please click here. Also, you use a single stylesheet (which is the preferred way) or create multiple CSS sheets. To use separate stylesheet for media quires, you just need to add a media attribute and the quires inside the <link> tag.
Example:
<link href="small.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 900px)" />
respond.js
Once it again, we face with the problem with Internet Explorer, it cannot identify Media Queries. In order to counter this, you need to download a specific JavaScript called respond.js. Download the script here.
Summary
CSS3 Media Queries are a great way to make your website more responsive to users. Media types make websites display a specific layout, media types sets conditions for browsers, and media features set the height and width for the user’s optimal viewing.
If you want or need to see alternate explanation of Media Queries, check out these links and videos:
practice
Now, it to start practicing these newly acquired skills. What you need to do is to build a webpage similar to the example here. The following are the requirements:
The webpage must be able to change color as you decrease the size of the browser.
The header and the title must completely fit within the window.
The two articles must go from side by side to stacked.
If you get stuck on the assignment or want to see how it was done as compared to yours, click the answer sheet below:
After you accomplish this task, try use different keywords and features to see what happens.