Scribd
Upload
6 views16 pages

Understanding Responsive Web Design

The document provides an overview of Responsive Web Design, emphasizing the use of HTML and CSS to create web pages that adapt to various screen sizes. It includes techniques such as setting the viewport, using responsive images, and employing media queries to enhance layout flexibility. Additionally, it introduces CSS frameworks like W3.CSS and Bootstrap that facilitate responsive design implementation.

Uploaded by

dev.edossmjo
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
6 views16 pages

Understanding Responsive Web Design

The document provides an overview of Responsive Web Design, emphasizing the use of HTML and CSS to create web pages that adapt to various screen sizes. It includes techniques such as setting the viewport, using responsive images, and employing media queries to enhance layout flexibility. Additionally, it introduces CSS frameworks like W3.CSS and Bootstrap that facilitate responsive design implementation.

Uploaded by

dev.edossmjo
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

5/8/25, 11:31 AM HTML Responsive Web Design

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C

HTML Responsive Web Design


❮ Previous Next ❯

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.

What is Responsive Web Design?


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 (desktops, tablets, and
phones):

[Link] 1/16
5/8/25, 11:31 AM HTML Responsive Web Design

Try it Yourself »
Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C

Setting The Viewport


To create a responsive website, add the following <meta> tag to all your web pages:

Example

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Try it Yourself »

This will set the viewport of your page, which will give the browser instructions on how
to control the page's dimensions and scaling.

Here is an example of a web page without the viewport meta tag, and the same web
page with the viewport meta tag:

Without the viewport meta tag: With the viewport meta tag:

[Link] 2/16
5/8/25, 11:31 AM HTML Responsive Web Design

 Tutorials  Exercises  Services   Sign Up Log in


Tip: If you are browsing this page on a phone or a tablet, you can click on the two links
above to
HTML see the
CSS difference.
JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C

Responsive Images
Responsive images are images that scale nicely to fit any browser size.

Using the width Property


If the CSS width property is set to 100%, the image will be responsive and scale up
and down:

[Link] 3/16
5/8/25, 11:31 AM HTML Responsive Web Design

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C

Example
<img src="img_girl.jpg" style="width:100%;">

[Link] 4/16
5/8/25, 11:31 AM HTML Responsive Web Design

Try it Yourself »
Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
Notice that in the example above, the image 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.

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:

[Link] 5/16
5/8/25, 11:31 AM HTML Responsive Web Design

 Tutorials 
Example
Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
<img src="img_girl.jpg" style="max-width:100%;height:auto;">

Try it Yourself »

Show Different Images Depending on Browser


Width
The HTML <picture> element allows you to define different images for different
browser window sizes.

Resize the browser window to see how the image below changes depending on the
width:

Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">

[Link] 6/16
5/8/25, 11:31 AM HTML Responsive Web Design

<source srcset="img_flowers.jpg" media="(max-width: 1500px)">


 Tutorials
<source  Exercises  Services 
srcset="[Link]">  Sign Up Log in
<img src="img_smallflower.jpg" alt="Flowers">
HTML CSS
 </picture> JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C

Try it Yourself »

Responsive Text Size


The text size can be set with a "vw" unit, which means the "viewport width".

That way the text size will follow the size of the browser window:

Hello World
Resize the browser window to see how the text size scales.

Example
<h1 style="font-size:10vw">Hello World</h1>

Try it Yourself »

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is
50cm wide, 1vw is 0.5cm.

Media Queries
[Link] 7/16
5/8/25, 11:31 AM HTML Responsive Web Design

In addition to resize text and images, it is also common to use media queries in
 Tutorials
responsive web  Exercises 
pages. Services   Sign Up Log in

HTML CSS queries


With media JAVASCRIPT SQL completely
you can define PYTHON different
JAVA styles
PHPfor different
HOW TO browser
[Link]
sizes. C

Example: resize the browser window to see that the three div elements below will
display horizontally on large screens and stack vertically on small screens:

Left Menu

Main Content

Right Content

Example
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}

.main {
float: left;
width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */


@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller
*/
}
}
</style>

[Link] 8/16
5/8/25, 11:31 AM HTML Responsive Web Design

Try it Yourself »
Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C

Tip: To learn more about Media Queries and Responsive Web Design, read our RWD
Tutorial.

Responsive Web Page - Full Example


A responsive web page should look good on large desktop screens and on small mobile
phones.

Try it Yourself »

Ever heard about W3Schools Spaces? Here you can create your website from scratch
or use a template, and host it for free.

Get started for free ❯

* no credit card required

[Link] 9/16
5/8/25, 11:31 AM HTML Responsive Web Design

Responsive
 Tutorials  Web Design
Exercises Services  - Frameworks
 Sign Up Log in

HTML CSS CSSJAVASCRIPT


All popular SQL responsive
Frameworks offer PYTHONdesign.
JAVA PHP HOW TO [Link] C

They are free, and easy to use.

[Link]
[Link] is a modern CSS framework with support for desktop, tablet, and mobile design
by default.

[Link] is smaller and faster than similar CSS frameworks.

[Link] is designed to be independent of jQuery or any other JavaScript library.

[Link] Demo
Resize the page to see the responsiveness!

London Paris Tokyo


London is the capital city Paris is the capital of Tokyo is the capital of
of England. France. Japan.

It is the most populous The Paris area is one of It is the center of the
city in the United the largest population Greater Tokyo Area, and
Kingdom, with a centers in Europe, with the most populous
metropolitan area of over more than 12 million metropolitan area in the
13 million inhabitants. inhabitants. world.

Example
<!DOCTYPE html>
<html>
<head>
<title>[Link]</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
[Link] 10/16
5/8/25, 11:31 AM HTML Responsive Web Design

<link rel="stylesheet" href="[Link]


 Tutorials 
</head> Exercises  Services   Sign Up Log in
<body>
HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
<div class="w3-container w3-green">
<h1>W3Schools Demo</h1>
<p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>

<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>

</body>
</html>

Try it Yourself »

To learn more about [Link], read our [Link] Tutorial.

[Link] 11/16
5/8/25, 11:31 AM HTML Responsive Web Design

Bootstrap
 Tutorials  Exercises  Services   Sign Up Log in

HTML
AnotherCSS JAVASCRIPT
popular SQLis Bootstrap:
CSS framework PYTHON JAVA PHP HOW TO [Link] C

Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="[Link]
rel="stylesheet">
<script
src="[Link]
.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">


<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>

<div class="container mt-5">


<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum...</p>
</div>

[Link] 12/16
5/8/25, 11:31 AM HTML Responsive Web Design

</div>
</div>Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
Try it Yourself »

To learn more about Bootstrap, go to our Bootstrap Tutorial.

?
Exercise
There is a CSS font size unit that sizes text in percent of the viewport, what
unit is that?

px

em

vw

vp

Submit Answer »

❮ Previous Next ❯

Track your progress - it's free! Sign Up Log in

[Link] 13/16
5/8/25, 11:31 AM HTML Responsive Web Design

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C

COLOR PICKER



 PLUS SPACES

GET CERTIFIED FOR TEACHERS

[Link] 14/16
5/8/25, 11:31 AM HTML Responsive Web Design

 Tutorials  Exercises 
FOR BUSINESS
Services 
CONTACT US
 Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
[Link] Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
[Link] Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top Examples Get Certified


HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
[Link] Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate

    

FORUM ABOUT ACADEMY


W3Schools is optimized for learning and training. Examples might be simplified to improve
reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot

[Link] 15/16
5/8/25, 11:31 AM HTML Responsive Web Design
warrant full correctness

 of all content. While using W3Schools, you agree to have read


Tutorials  Exercises  Services 
cookie and privacy policy.
and accepted our terms of use,
Sign Up Log in

HTML
 Copyright
CSS 1999-2025 by Refsnes
JAVASCRIPT SQLData. PYTHON
All Rights Reserved.
JAVA W3Schools
PHP is Powered
HOW TOby [Link].
[Link] C

[Link] 16/16

Common questions

Powered by AI

A fully responsive web page is achieved by using responsive images that adapt to screen sizes, responsive text sizes that maintain readability by scaling with viewport width, and media queries to implement different styles across devices. This integrative approach ensures functionality and aesthetics are preserved, providing an optimal user experience across platforms .

Frameworks like W3.CSS and Bootstrap provide pre-designed, scalable components and utility classes essential for modern responsive web design. They streamline development by offering consistent, out-of-the-box solutions for various devices, simplifying the creation of complex layouts that support diverse resolutions effortlessly .

Bootstrap provides a structured grid system, predefined classes, and components that simplify building responsive layouts quickly. Compared to custom CSS, it reduces development time and complexity while ensuring consistency across different browser sizes. However, it may increase project size and reduce customization flexibility .

W3.CSS aids in creating responsive designs by offering a smaller, faster CSS framework that inherently supports responsive design across desktops, tablets, and mobiles, simplifying development without dependence on JavaScript libraries like jQuery, thus decreasing load times and complexity .

Using 'vw' units (viewport width) for font size in responsive web design ensures that the text scales with the size of the browser window, maintaining readability across devices. This contrasts with fixed units like 'px', which do not adjust dynamically, potentially compromising legibility on smaller screens .

Media queries allow the application of different styles based on browser or device characteristics, such as width, height, and orientation, thus providing the flexibility to optimize user interfaces for various display environments and improving user experience on diverse devices .

The viewport meta tag plays a crucial role in responsive web design by directing the browser on how to control the page's dimensions and scaling. It helps ensure that the layout adjusts appropriately to different screen sizes, enhancing visibility and usability on various devices .

Without the viewport meta tag, web pages do not adjust dimensions and scaling appropriately for screen sizes, leading to possible misalignment and poor visibility on mobile devices by using incorrect layouts intended for desktop views .

The 'max-width' property might be preferred over 'width' for responsive images as it prevents the image from exceeding its original size, maintaining image quality. This ensures images do not become pixelated or appear distorted by only scaling down, which differs from the 'width' property that scales images up and down .

The <picture> element in responsive design allows specification of multiple image sources to deliver different images based on viewport size. This ensures optimal loading and display efficiency by allowing the most appropriate image to be chosen without downloading unnecessary data, enhancing both performance and display quality .

You might also like