Learn Responsive Design 
Learn responsive design techniques, like relative sizing units and media queries, to create websites viewable on devices of all sizes.
Start
Key Concepts
Review core concepts you need to learn to master this subject
CSS unit em
CSS unit rem
Usage of Percentages in CSS
background-size: cover;
css media query
Media Type in Media Queries
And Operator Media Queries
Ranges in Media Queries
CSS unit em
CSS unit em
.nav-container {
font-size: 10px;
}
.nav-container span {
font-size: 1.5em; /* 10 x 1.5 = 15px */
}em is a CSS unit used to create relatively-sized content. 1 em unit represents the base font size of the current element.
In the example code block, <span> elements nested inside of elements with class nav-container will have a font size of 15px.
CSS unit rem
CSS unit rem
.nav-container {
font-size: 10px;
}
.nav-container span {
font-size: 1.5em; /* 10 x 1.5 = 15px */
}The CSS unit rem can be used to set the font size of HTML elements relative to the font size of the root element. 1 rem represents the size of the base font within the root element - the <html> tag.
In the example code block, the font size for all the <span> elements will be twice the size of the font size declared for the root element.
Usage of Percentages in CSS
Usage of Percentages in CSS
.nav-container {
font-size: 10px;
}
.nav-container span {
font-size: 1.5em; /* 10 x 1.5 = 15px */
}Instead of defining a fixed width using units like px, or cm, percentages can be used in CSS to set the height and width of child elements relative to the dimensions of their parent. The child elements will grow or shrink according to the set percentage values if the parent element changes in size.
background-size: cover;
background-size: cover;
.nav-container {
font-size: 10px;
}
.nav-container span {
font-size: 1.5em; /* 10 x 1.5 = 15px */
}The CSS background-size property is used to specify the size of the background image. When given the value cover, like background-size:cover, the image covers the complete background of the container in which it is being displayed.
The proportions of the image are maintained, so if the dimensions exceed the container’s, then some parts of the image will be left out.
css media query
css media query
.nav-container {
font-size: 10px;
}
.nav-container span {
font-size: 1.5em; /* 10 x 1.5 = 15px */
}A CSS media query can be used to adapt a website’s display and layout to different screen sizes. A media query begins with the @media keyword and is followed by one or more conditions that check screen size, orientation, resolution, and/or other properties. If these conditions are met, all CSS rules within the media query will be applied to the page. Media queries are used for responsive web design by tailoring specific stylesheets to different types of devices such as laptops, tablets, mobiles, and more.
Media Type in Media Queries
Media Type in Media Queries
.nav-container {
font-size: 10px;
}
.nav-container span {
font-size: 1.5em; /* 10 x 1.5 = 15px */
}When writing media queries in CSS we use the only keyword to specify the type of device. Initially, CSS incorporated a variety of media types such as screen, print and handheld. In order to ensure responsive design and to accommodate a variety of screen sizes the keyword screen is now always used for displaying content.
And Operator Media Queries
And Operator Media Queries
.nav-container {
font-size: 10px;
}
.nav-container span {
font-size: 1.5em; /* 10 x 1.5 = 15px */
}Through using the and operator when writing media queries in CSS, we can specify that multiple media features are required. For example we could require a certain width as well as a specific resolution for a CSS ruleset to apply. The and operator when chaining together multiple media features allows us to be more specific with the screens that we are targeting as we build responsive designs.
Ranges in Media Queries
Ranges in Media Queries
.nav-container {
font-size: 10px;
}
.nav-container span {
font-size: 1.5em; /* 10 x 1.5 = 15px */
}Media queries can use CSS to target screen sizes within a certain range through using multiple widths and/or heights. This is an effective tool for responsive design that will address a variety of screen sizes in one CSS media query. In order to set a range for width or the height, set the minimum screen size through using min-width and/or min-height and then set the maximum through using max-width or max-height. These properties are used in combination with the and operator.
CSS Media Features in Media Queries
CSS Media Features in Media Queries
.nav-container {
font-size: 10px;
}
.nav-container span {
font-size: 1.5em; /* 10 x 1.5 = 15px */
}Media queries in web development ensure that a website design is responsive. It does so through creating tailored style sheets based on the resolution of the device that it is displayed upon. The browser will detect the screen size and apply the CSS styles for that screen size based on specified media features. Media queries can set rules based on features like the screen width, the screen resolution and device orientation. These media rules can be separated by commas. When one of the media rules is true then the accompanying CSS will apply.
- 1Modern technology allows users to browse the Internet via multiple devices, such as desktop monitors, mobile phones, tablets, and more. Devices of different screen sizes, however, pose a problem fo…
- 2Incorporating relative sizing starts by using units other than pixels. One unit of measurement you can use in CSS to create relatively-sized content is the em, written as em in CSS. Historicall…
- 3The second relative unit of measurement in CSS is the rem, coded as rem. Rem stands for root em. It acts similar to em, but instead of checking parent elements to size font, it checks the _roo…
- 4To size non-text HTML elements relative to their parent elements on the page you can use percentages. Percentages are often used to size box-model values, like width and height, padding, border…
- 5Percentages can also be used to set the padding and margin of elements. When height and width are set using percentages, you learned that the dimensions of child elements are calculated based on t…
- 6Although relative measurements provide consistent layouts across devices of different screen sizes, elements on a website can lose their integrity when they become too small or large. You can limit…
- 7You can also limit the minimum and maximum height of an element. 1. min-height — ensures a minimum height for an element’s box. 2. max-height — ensures a maximum height for an eleme…
- 8Many websites contain a variety of different media, like images and videos. When a website contains such media, it’s important to make sure that it is scaled proportionally so that users can correc…
- 9Background images of HTML elements can also be scaled responsively using CSS properties. body { background-image: url(‘#’); background-repeat: no-repeat; background-position: center; back…
- 10Great work! You learned how to size elements on a website relative to other elements on the page. Let’s review what you learned: - Content on a website can be sized relative to other elements on…
- 1When someone visits a website, it’s possible they are viewing it on a phone, tablet, computer, or even a TV monitor. Because screen sizes can vary greatly across different devices, it’s important f…
- 2CSS uses media queries to adapt a website’s content to different screen sizes. With media queries, CSS can detect the size of the current screen and apply different CSS styles depending on the wi…
- 3Specific screen sizes can be targeted by setting multiple width and height media features. min-width and min-height are used to set the minimum width and minimum height, respectively. Conversely, m…
- 4Another media feature we can target is screen resolution. Many times we will want to supply higher quality media (images, video, etc.) only to users with screens that can support high resolution me…
- 5In previous exercises, we chained multiple media features of the same type in one media query by using the and operator. It allowed us to create a range by using min-width and max-width in the same…
- 6If only one of multiple media features in a media query must be met, media features can be separated in a comma separated list. For example, if we needed to apply a style when only one of the be…
- 7We know how to use media queries to apply CSS rules based on screen size and resolution, but how do we determine what queries to set? The points at which media queries are set are called _breakp…
- 8Incredible work! You learned how to change the way a website appears on different screens with media queries and breakpoints Throughout this lesson, you learned: - When a website responds to th…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory
Learn Responsive Design
Start