HTML Responsive Web Design

HTML Responsive Web Design with Examples

In this article, I am going to discuss HTML Responsive Web Design with Examples. Please read our previous article where we discussed HTML Semantic Elements with Examples. At the end of this article, you will learn everything about HTML Responsive Web Design with Examples.

HTML Responsive Web Design

We can design our website to look perfect on multiple devices with the help of Responsive web design. HTML and CSS are used in responsive web design to resize, hide, shrink, expand, or move content. It ensures that the contents look good on any screen. We can also apply separate styling for different devices such as mobiles, tablets, laptops, etc.

HTML Responsive Web Design with Examples

Responsive Images

It’s good practice to use responsive images in websites because they can scale automatically as per the browser width. To make an image responsive we can set the value of the CSS width property to 100%.

In the example below we have set the image width value to 100%, so the image will try to occupy 100% of the screen width. But for large screen sizes, the image may scale larger than its original size which will result in a decrease in the quality of the image.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Responsive Image</h2>

<img src="https://cdn.pixabay.com/photo/2021/02/02/20/06/pokemon-5975183__340.jpg" style="width:100%;">

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Responsive Images

In order to solve the above problem, we can use the max-width property which will never scale the image above its original size.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Responsive Image max-width</h2>

<img src="https://cdn.pixabay.com/photo/2021/02/02/20/06/pokemon-5975183__340.jpg" style="max-width:100%;">

</body>
</html>

Run the above examples in the code editor to notice the difference.

HTML Responsive Web Design with Examples

Show Different Images Depending on Browser Width

We can also change the image based on screen size. For example, we can display different images for mobile, tablet, and laptop with the help of picture elements. The srcset attribute is used to insert an image, and media is used to define screen width. In the below example we have used the picture element which will change the image on screen when a user resizes the window.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<br>

<picture>
  <source srcset="https://cdn.pixabay.com/photo/2013/07/13/13/46/bicycle-161524_960_720.png" media="(max-width: 400px)">
  <source srcset="https://cdn.pixabay.com/photo/2015/05/08/10/54/bike-757914_960_720.png" media="(max-width: 700px)">
  <source srcset="https://cdn.pixabay.com/photo/2016/03/31/22/47/motorbike-1297213__340.png" media="(max-width: 1000px)">
  <img src="https://cdn.pixabay.com/photo/2021/10/10/19/52/motorcycle-6698576__340.png" alt="Flowers" style="width:80vw;">
</picture>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Show Different Images Depending on Browser Width

Responsive Text Size

We can also make text responsive by using vw unit instead of px, em, etc. vw stands for viewport width.1 vw is equal to 1% of the screen width. So, if we define text size as 20vw the size of the text will be 20% of screen width.

Consider we have a device with a width of 1000px and we have assigned the text size to 20 vw then the size of the text will be 200px. As we increase or decrease the screen width the text size will also increase or decrease.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
padding:4%;
color:hotpink;
background-color:lightgray;
font-family:arial;}
</style>
</head>
<body>

<h3 style="font-size:8vw;">Responsive Text</h3>
<p style="font-size:3vw;">increase or decrease the browser width</p>
<p style="font-size:3vw;">when you resize the text size will change</p>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Responsive Text Size

HTML Media Queries

With the help of media queries, we can apply separate styling for different device widths. Media queries are used commonly in responsive web designs. In the example below we have used media queries to change the background color for different device widths. When a user resizes the window the background color will change.

  1. Between 300px and 700px screen width color is red
  2. Between 701px and 1000px screen width color is blue
  3. Above 1001 px color is green
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background-color:lightgray;
font-family:arial;}

@media screen and (min-width:300px) and (max-width:700px){

body{
background-color:tomato;}
}

@media screen and (min-width:701px) and (max-width:1000px){

body{
background-color:dodgerblue;}
}

@media screen and (min-width:1001px){

body{
background-color:mediumseagreen;}
}


</style>
</head>
<body>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

HTML Media Queries

In the next article, I am going to discuss HTML URL Encoding with Examples. Here, in this article, I try to explain HTML Responsive Web Design with Examples and I hope you enjoy this HTML Responsive Web Design with Examples article.

Leave a Reply

Your email address will not be published.