Responsive web design means creating web pages that appear good on all devices
A good responsive web design automatically adjusts for different screen sizes and viewports.
What is meant by Responsive Web Design?
Responsive Web Design includes using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it appear good on all devices (desktops, tablets, and phones):
Cinque Terre
Resize the browser window
The Walk
Transport
History
Gallery
The Walk
The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.
What?
Cinque Terre comprises five villages
Resize the browser window to see the content respond to the resizing.
Output:
Setting The Viewport
Add the following <meta> tag to all the web pages, for creating a responsive website:
Example
Responsive Images
Responsive images are defined as those images that scale properly to fit any browser size.
Using the width Property
When CSS width property is set to 100%, the image is responsive and scales up and down:
Example:
Using the max-width Property
When the max-width property is set to 100%, the image scales down if it has to, but never scales up to be larger than its original size:
Example:
Show Different Images Depending on Browser Width
The HTML <picture> element defines different images for different browser window sizes.
By resizing, the browser window helps to see how the image below changes depending on the width:
Example:
Responsive Text Size
The text size can be set with a “vw” unit, that refers to the “viewport width”.
Example
Responsive Text
Resize the browser window to see how the text size scales.
Media Queries
In addition, to resizing text and images, media queries are also used in responsive web pages.
Media queries allow you to define completely different styles for different browser sizes.
Example: resize the browser window to see that the three div elements below will display horizontally on large screens and stacked vertically on small screens:
Example
/* Media Query for Mobile Devices */
@media (max-width: 480px) {
body {
background-color: red;
}
}
/* Media Query for low resolution Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
body {
background-color: yellow;
}
}
/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px){
body {
background-color: blue;
}
}
/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px){
body {
background-color: green;
}
}
/* Media Query for Large screens */
@media (min-width: 1281px) {
body {
background-color: white;
}
}
Bootstrap
The popular CSS framework is Bootstrap. Bootstrap includes HTML, CSS, and jQuery to make responsive web pages.
Example
My First Bootstrap Page
Resize this responsive page to see the effect!
Column 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...
Column 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...
Column 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...