Responsive Design & CSS Media Queries
Class Agenda
- What is Responsive Design?
- Introduction to Media Queries
What is Responsive Design?
Responsive web design is about creating web pages that look good on all devices! A responsive web design will automatically adjust for different screen sizes and viewports.
That is achieved by structuring your HTML and adding CSS such that components of your page are resized appropriately for screen sizes.
It is important to understand that responsive web design isn’t a separate technology — it is a term used to describe an approach to web design or a set of best practices, used to create a layout that can respond to the device being used to view the content. These approaches can include:
- Making containers fluid by setting
max-width: 100%
- Using relative units for typography (
em
,rem
) - Using CSS Flexbox or CSS Grid to create layouts that grow and shrink smoothly
- Using media queries to change styles on different viewports
Relative Units
Relative units are relative to other content on the page. That means that their size is based on the size of something else, usually their parent element.
%
, em
, and rem
are three common helpful units:
%
= “Take up % of the parent container”- Example: parent element is 400px wide, setting 50% width on the child makes its width 200px
em
= “The font size of the parent element (for properties other than font-size) or this element itself (for font-size)”- In other words: if you set an element’s font-size property like
font-size: 1em
, that means “the same font size as the parent element.” If you set any other property likewidth: 1em
, that means “the same as this element’s font size.” - Example: parent element has 16px font size, setting
font-size: .75em
on the child makes its font-size 12px - Example: parent element has 16px font size, setting
margin: .75em
on the child creates a 12px margin around the element - Example: parent element has 16px font size, element itself has
font-size: 12px
. Settingmargin: .75em
on the element itself creates a 9px margin around the element
- In other words: if you set an element’s font-size property like
rem
= The font size of the “root element”, <html>- If you have CSS properties with values set in rem and you change the font size on the <html> element, those elements will adapt!
- Most browsers have a default font-size of
16px
, so if you don’t change this,1rem
=16px
Testing Responsive Designs
It is extremely important to look at the result of your implementation directly in the browser. As you have already learned, the browser Dev Tools are an excellent way to check and debug your html and css code.
What’s more, the browser Dev Tools allow you to check how your page is going to look on different devices such as tablets or mobile phones. Sometimes you can even select from a few built-in device sizes. Use the Dev Tools to check out how your website looks on mobile devices.
Chrome:
![The menu that appears when you inspect in Chrome, with the responsive design mode button circled](./responsive-design-chrome.png)
Firefox:
![The menu that appears when you inspect in Firefox, with the responsive design mode button circled](./responsive-design-firefox.png)
Responsive images
“Responsive images” means having images that look good on all different devices and viewport widths.
Making images look good at all sizes is often a matter of setting their width
or max-width
to 100%
, and possibly wrapping them in a <div>
.
Here are a few common problems with images and how you can solve them:
-
Problem: Image is blurry
- Usually means the image is small and being displayed at a large size
- Important: the “actual” image size is not the same as size shown in browser
- How can you know the “actual” size? Download the image and check!
-
Image is stretched or warped
- Usually because one dimension (height/width) of the image is hardcoded and the other is not
-
Image does not change size with page/container
- Usually because image uses a px width instead of %
-
Image is cut off/overflows the container
- Lots of possible reasons. Might need
width
ormax-width
, or you could use theobject-fit
andobject-position
CSS properties
- Lots of possible reasons. Might need
-
Image set using
background-image: url(...)
is not showing the correct part of the image- Use a combination of
background-size
andbackground-position
properties to resize and reposition it
- Use a combination of
Exercise
Solve all of the problems in this CodePen!
Introduction to Media Queries
Media queries are a fundamental aspect of creating responsive web designs, which allow websites to adapt to different devices and screen sizes.
We’ll explore how media queries work and how you can use them to create layouts that look great on both desktop and mobile devices.
While desktop computers were once the primary way people connected to the internet, the rise of smartphones has dramatically changed the game. Today, most people use their smartphones to access the internet. Mobile internet usage has surpassed desktop usage in recent years, and this trend is only expected to continue.
Your job, as a web developer, is to develop websites that work seamlessly across a variety of devices, including smartphones and tablets. We’re going to look at a concept called Media Queries, which will help us to do this.
Using Media Queries
A media query is a conditional statement that checks certain conditions (such as screen size, device orientation, or aspect ratio) and applies a set of CSS styles based on those conditions.
For example, a media query could apply different font sizes or layout styles to a website when viewed on a smartphone device versus a laptop.
Media queries work by using the “@media” rule in CSS, which specifies a set of styles to apply when certain conditions are met.
Developers can use a variety of conditions to trigger a media query, such as “max-width”, “min-width”, “orientation”, and “device-pixel-ratio”.
@media screen and (min-width: 768px) {
body {
font-size: 20px;
}
}
Example
The viewport tag
The viewport HTML meta tag is important for accurate media queries because it helps the browser determine the size of the viewport (the visible area of the webpage). Some mobile devices and other narrow screens render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once.
Without this tag, the browser may use a default viewport size, which can cause media queries to work incorrectly.
Exercises
Homework
- (15 - 30min) Using pencil and paper, create a mobile-first design (in other words: draw it for a phone screen, then for a desktop) for a news webpage with the following elements:
- Navigation bar
- Main section
- Contains at least two different “types” of section, e.g. ⅓ + ⅔ with image and text and a three-column layout
- Footer
- (90 - 120min) Implement your design, starting with the mobile view. Focus on making one complete element (i.e. nav, section 1, section 2, footer) at a time so you get practice with media queries!
Glossary & Terminology
Responsive Web Design
- Responsive web design (RWD) is an approach to web design that makes web pages look good on a variety of devices and window or screen sizes from minimum to maximum display size. More info here.Viewport
- The user’s visible area of a web pageBreakpoint
- The viewport width at which the layout changesCSS at-rule
- An instruction that ‘tells’ css how to behave. For example,@media
instructs the CSS that it should only apply the media queries content if the device meets the criteria of the condition/s.media type
- Describes the device category, for examplescreen
,print
, orall
.media feature
- Describe specific characteristics of the device, such as min-width or max-width.