Scribd
Upload
20 views3 pages

Learn Responsive Design - Learn Responsive Design Cheatsheet - Codecademy

The document discusses different CSS media features that can be used in media queries to make web content responsive, including units like em and rem, using percentages, the background-size property, and features like min-width, max-width, and ranges.

Uploaded by

dsochora
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views3 pages

Learn Responsive Design - Learn Responsive Design Cheatsheet - Codecademy

The document discusses different CSS media features that can be used in media queries to make web content responsive, including units like em and rem, using percentages, the background-size property, and features like min-width, max-width, and ranges.

Uploaded by

dsochora
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Cheatsheets / Learn Responsive Design

Learn Responsive Design

CSS unit em
em is a CSS unit used to create relatively-sized .nav-container {
content. 1 em unit represents the base font size of the
font-size: 10px;
current element.
}
In the example code block, <span> elements
nested inside of elements with class nav-
container will have a font size of 15px . .nav-container span {
font-size: 1.5em; /* 10 x 1.5 = 15px */
}

Usage of Percentages in CSS


Instead of defining a fixed width using units like px , or .news-row {
cm , percentages can be used in CSS to set the height
height: 300px;
and width of child elements relative to the dimensions
of their parent. The child elements will grow or shrink width: 500px;
according to the set percentage values if the parent }
element changes in size.

.news-row .news-column {
height: 80%; /* 240px */
width: 50%; /* 250px */
}

background-size: cover;
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 unit rem


The CSS unit rem can be used to set the font size of html {
HTML elements relative to the font size of the root
font-size: 18px;
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 {
<span> elements will be twice the size of the font
font-size: 2rem;
size declared for the root element.
}

Media Type in Media Queries


When writing media queries in CSS we use the only @media only screen and (min-width: 600px)
keyword to specify the type of device. Initially, CSS
{
incorporated a variety of media types such as
screen , print and handheld . In order to /* ruleset for >= 600px */
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


Through using the and operator when writing media @media only screen and (max-width: 480px)
queries in CSS, we can specify that multiple media
and (min-resolution: 300dpi) {
features are required. For example we could require a
certain width as well as a specific resolution for a CSS /* CSS ruleset */
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.

css media query


A CSS media query can be used to adapt a website’s /* For screen sizes less than or equal to
display and layout to different screen sizes. A media
480px (most likely a mobile device), the
query begins with the @media keyword and is
followed by one or more conditions that check screen body element's font size will be set to
size, orientation, resolution, and/or other properties. If 12px and the #photo element's width will
these conditions are met, all CSS rules within the media
be set to 100% */
query will be applied to the page. Media queries are
used for responsive web design by tailoring specific @media only screen and (max-width: 480px)
stylesheets to different types of devices such as {
laptops, tablets, mobiles, and more.
body {
font-size: 12px;
}

#photo {
width: 100%;
}
}

CSS Media Features in Media Queries


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.

Ranges in Media Queries


Media queries can use CSS to target screen sizes within @media only screen and (min-width: 480px)
a certain range through using multiple widths and/or
and (max-width: 600px) {
heights. This is an effective tool for responsive design
that will address a variety of screen sizes in one CSS /* ruleset for 480px - 600px */
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.

You might also like