CSS
Responsive Web Design
RESPONSIVE DESIGN ROADMAP
• Why Responsive?
• Viewport & Meta
• Media Queries
• Mobile-First Strategy
• Flexbox Responsive
• Grid Responsive
• Container Queries
Introduction to Responsive Web 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.
Best Experience For All Users
• Web pages can be viewed with many different devices: desktops, tablets, and mobile phones.
• Your web page should look good and be easy to use, regardless of the device.
• Responsive web design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge a
website, to make it look good on all devices.
Key components in responsive web design are:
• Viewport <meta> tag
• Flexible layout (grid and flex)
• Media queries
Responsive Web Design - The Viewport
Setting The Viewport
• The viewport is the user's visible area of a web page.
• The viewport varies with the device (will be a lot smaller on a mobile phone than
on a computer screen).
• You should include the following <meta> element in the <head> section of all
your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
• This gives the browser instructions on how to control the page's dimensions and
scaling.
• The width=device-width part sets the width of the page to follow the screen-width
of the device (which will vary depending on the device).
• The initial-scale=1.0 part sets the initial zoom level when the page is first loaded
by the browser.
Size Content to The Viewport
• Users are used to scrolling websites vertically on both desktop and mobile devices - but not
horizontally!
• So, if the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a
poor user experience.
Some additional rules to follow:
1. Do NOT use large fixed-width elements - For example, if an image has a width wider than the
viewport, it causes the viewport to scroll horizontally. Remember to adjust this content to fit within
the viewport’s width.
2. Do NOT let the content rely on a particular width to render well - Since screen dimensions vary
widely between devices, content should not rely on a particular viewport width to render well.
3. Use CSS media queries to apply different styling for small and large screens - Setting large
absolute CSS widths for page elements will cause the elements to be too wide for smaller devices.
Instead, consider using relative width values, such as width: 100%. Also, be careful of using large
absolute positioning values. It may cause the element to fall outside the viewport on small devices.
Responsive Web Design - Building a Grid View
What is a Grid-View?
• Many web pages are based on a grid-view, which means that the page is divided into rows and
columns.
• A responsive grid-view often has 6 or 12 columns, and will shrink and expand as you resize the
browser window.
Building a Grid View
• Let’s start building a grid-view.
• First, ensure that all HTML elements have the box-sizing property set to border-box. This makes
sure that the padding and border are included in the total width and height of the elements.
• Add the following at the top of your CSS:
*{
box-sizing: border-box;
}
The HTML
• We create a grid container with five grid items (header, menu, content, facts, footer).
The CSS
• Add some styles and colors to make it look better.
Responsive Web Design - Media Queries
CSS Media Queries
• CSS media queries allow you to apply styles based on the characteristics of a device or the
environment displaying the web page.
• CSS media queries are essential for creating responsive web pages.
• The CSS @media rule is used to add media queries to your style sheet.
• Syntax: @media screen and (min-width:768px){ }
@media print { }
Use Media Queries to Add a Breakpoint
On the previous page, we made a grid layout web page. Now we want to add a breakpoint with media
queries to rearrange the grid items on bigger screens.
Another Breakpoint
You can add as many breakpoints as you like.
Typical Device Breakpoints
There are tons of screens and devices with different heights and widths, so it is hard to create an
exact breakpoint for each device.
@media (max-width: 480px)
@media (max-width: 768px)
@media (min-width: 769px)
Media Queries for Screen Orientation
• Media queries can also be used to change the layout of a page depending on the orientation of the
screen.
• Here, we change the background-color of the body if the screen orientation is in landscape mode:
Hide Elements With Media Queries
Here, we use media queries to hide an element on small screens:
Change Font Size With Media Queries
• Here, we use media queries to change the font size of an element on different viewport widths:
Media Queries for User Preferences
• Some users have motion sensitivity and prefer websites with less animation.
• The prefers-reduced-motion media feature lets you check if a user has asked to reduce motion,
such as animations or transitions. Use this feature to turn off animations and transitions for the
users who has activated this setting on their computer:
Responsive Web Design - Images
Using the width Property
If the width property is set to a percentage and the height property is set to "auto", the image will be
responsive and scale up and down
img {
width: 100%;
height: auto;
}
Notice that in the example above, the image can be scaled up beyond its original size. A better
solution, in many cases, will be to use the max-width property instead.
Using the max-width Property
If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger
than its original size:
img {
max-width: 100%;
height: auto;
}
Background Images
Background images can also respond to resizing and scaling.
Here we will show three different methods:
1. Using background-size: contain;: The background image will scale up and down, and tries
to fit the content area. However, the image will keep its aspect ratio (the proportional
relationship between the image's width and height):
Using background-size: contain;:
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid black;
}
2. Using background-size: 100% 100%;: The background image will stretch to cover the entire
content area:
Using background-size: 100% 100%;:
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid black;
}
3. Using background-size: cover;: The background image will scale to cover the entire content area.
Notice that the "cover" value keeps the aspect ratio, and some part of the background image may be
clipped:
Using background-size: cover;:
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid black;
}
Different Images for Different Devices
A large image can be perfect on a big computer screen, but useless on a small device. Why load a
large image when you have to scale it down anyway? To reduce the load, or for any other reasons,
you can use media queries to display different images on different devices.
The HTML <picture> Element
• The HTML <picture> element gives web developers more flexibility in specifying image
resources.
• The most common use of the <picture> element will be for images used in responsive designs.
Instead of having one image that is scaled up or down based on the viewport width, multiple
images can be designed to more nicely fill the browser viewport.
• The <picture> element works similar to the <video> and <audio> elements. You set up different
sources, and the first source that fits the preferences is the one being used:
• The srcset attribute is required, and defines the source of the image.
• The media attribute is optional, and accepts the media queries you find in CSS @media rule.
• You should also define an <img> element for browsers that do not support the <picture> element.
Responsive Web Design - Videos
Using The width Property
If the width property is set to 100%, the video player will be responsive
and scale up and down:
video {
width: 100%;
height: auto;
}
Notice that in the example above, the video player can be scaled up to
be larger than its original size. A better solution, in many cases, will be
to use the max-width property instead.
Add a Video to the Example Web Page
We want to add a video in our example web page. The video will be resized to
always take up all the available space:
video {
width: 100%;
height: auto;
}
Using The max-width Property
If the max-width property is set to 100%, the video player will scale down if
it has to, but never scale up to be larger than its original size:
video {
max-width: 100%;
height: auto;
}
Responsive Web Design - Frameworks
There are many free CSS Frameworks that offer Responsive Design.
Using [Link]
• A great way to create a responsive design is to use a responsive style sheet,
like [Link]
• [Link] makes it easy to develop sites that look nice at any size!
Bootstrap
Another popular framework is Bootstrap. It uses HTML and CSS to make
responsive web pages
Thank You