Responsive CSS

Introduction

Nowadays, most visitors open the website on their phone. But the website was created in the past, so we could only open part of the website on a mobile phone. We have to zoom in to read or visit proposals on the website. But presently, all the websites created are user-friendly, and users can easily read them. It also increases the number of visitors to the website. In this article, we will learn about CSS's responsiveness and how to achieve this.

What is CSS Responsive Web Design?

In CSS, making a responsive webpage means that it is a method used to design and code the webpage to respond to all types of screen sizes. It also provides the best viewing express for the user, and it does not depend on the screen size of the mobile; it can fit any size of the mobile phone.

Why is Responsive Design So Important?

Creating a responsive webpage is very important. These are as follows.

1. Device-Independent Rendering

It is the main important advantage of creating a responsive webpage. Nowadays, we use so many types of devices with different screen sizes. Also, there is no uniform standard of size, shape, or display parameters across devices. At this point, responsive design comes into work. After creating the responsive webpage, it makes the devices optimal in the particular environment.

2. Usage Experience

We can increase the user experience by creating a responsive webpage. It is also a key factor that increases the number of web page visitors. If the user finds it very difficult to navigate the webpage, then the user never returns to the website again. We can increase the user experience on the web page by creating a responsive web page.

Key principles and techniques of CSS Responsive Web Design

There are some Key principles and techniques of CSS Responsive Web Design. These are as follows.

Fluid Grids: We have to design the web page layout using relative units rather than fixed units to provide a responsive web page design.
Flexible Images: With the help of CSS, we can ensure that we can fit the image inside the container without creating layout issues.
Media Queries: We can apply the CSS rule by providing specific conditions, such as screen width, orientation, and device characteristics, to modify the layout and styling of a webpage.
Breakpoints: We can define the particular width of the screen, which occurs when the layout of the webpage should be changed. We can also design to optimize the different sets of screen sizes.
Mobile-First Approach: First, we have to design the mobile version of the webpage. Then, we have to change the website to fit the web page. It will make a strong foundation for mobile devices.
Viewport Meta Tag: We can control the display of the web page by using the viewport of the meta tag in the HTML. It will also ensure the prevention of unwanted scaling.
CSS Flexbox and Grid Layout: We can create modern CSS layout techniques like grid or flexbox, which are used to create more complex and flexible responsive layouts.

A Mobile-First Approach to Responsive Web Design

The meaning of the mobile-first approach is to design the first website for the mobile, and then we have to create the desktop version of the web page. There is a variety of reasons which is used to create an effective website.

It is a very complex thing to create a mobile website. So we have to focus on the design of the mobile.
It is also very easy to scale the mobile version, which is used to scale down the desktop version.

Setting the Viewport

We have to write the viewport tag inside the meta tag. It is used to optimize the variety of the devices.

Syntax:

Example 1:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    .container {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
 <div class="container">
    <h1>Welcome to javatpoint</h1>
    <p>This is a simple example of responsive web design using CSS and the viewport meta tag.</p>
  </div>
</body>
</html>

Output

Explanation:

In the above example, there is a meta tag named "viewport," which ensures that the webpage should ensure that it adjusts its width to match the device's screen width. It also defines the responsive container with a maximum width of 1200px and centers it on the page.

Responsive Images

In responsive images, the image is scaled to fit the size of that fit the screen size. When there is a need to create a responsive image, we have to implement some technique that allows them to scale, resize, or even change based on the characteristics of the user's device.

How to Make Image Responsive?

We can create a responsive image with the help of some techniques. They are as follows.

1. By using the Width Property

We can create a responsive image with the help of the width property.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
    .image-container {
  max-width: 100%; /* Set the maximum width of the container */
}

.image-container img {
  width: 100%; /* Set the width of the image to 100% of its container */
  height: auto; /* Automatically adjust the height to maintain aspect ratio */
}

  </style>
</head>
<body>
 <div class="image-container">
  <img src="https://e1.pxfuel.com/desktop-wallpaper/815/611/desktop-wallpaper-website-nature-backgrounds-nature-for-background-full-screen.jpg" alt="Responsive Image">
</div>

</body>
</html>

Output

Explanation:

In the above example, there is a class named ".image-container," which provides the implementation maximum width of the container to 100%, also ensuring that the container adjusts to the width of its parent element. Also, we have set the height property as auto and the width property as width: 100%.

2. Using the Max-Width Property

We can create a responsive webpage with the help of the max-width property. The main advantage of using the max-width property is that we can not enlarge the image more than its original size.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .image-container {
      max-width: 800px; /* Set a maximum width for the container */
      margin: 0 auto; /* Center the container horizontally */
      padding: 20px;
      background-color: #f0f0f0;
    }

    .image-container img {
      max-width: 100%; /* Set the maximum width of the image to 100% of its container */
      height: auto; /* Maintain aspect ratio */
      display: block; /* Remove any extra space below the image */
      margin: 0 auto; /* Center the image within the container */
    }
  </style>
</head>
<body>
   <div class="image-container">
    <img src="https://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.jpg" alt="Responsive Image">
  </div>
</body>
</html>

Output

Explanation:

In the above example, we have created an image in the center position with a maximum width of 800px and a light gray background. Then we have to center the img container, which has a maximum width of 100%. Then, we have to provide the height property as auto. Then, we have to provide the display property as a block. Then, we have to set the margin as 0 auto.

3. Responsive Text Size

When there is a need to create the text size as responsive text, we have to ensure that the content should be legible and user-friendly for different devices. Let's see this with the help of the below code.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    .text-container {
      width: 80%; /* Set a width for the container */
      max-width: 800px; /* Set a maximum width for the container */
      margin: 0 auto; /* Center the container horizontally */
      padding: 20px;
      background-color: #f0f0f0;
    }
    .responsive-text {
      font-size: 2vw; /* Set the font size relative to the viewport width */
      line-height: 1.5; /* Set the line height for better readability */
    }
  </style>
</head>
<body>
  <div class="text-container">
    <p class="responsive-text">
      Welcome to the Java Point. This is an example of responsive text that adjusts size based on the viewport width. 
      The font size is set to the width of the viewport.
    </p>
  </div>
</body>
</html>

Output

Explanation:

In the above example, we have created text in the center position of the webpage, which has a width of 800px. It has the background of a light gray color. We have set the font side of the web page in the format of a "vw" unit. Then, we have to set the line height property, which increases the web page's readability. Then, we have to set the margin property as 0 auto.

What is a Media Query?

It is a technique present in CSS used to apply different types of styles to the webpage. It is also the main fundamental part of creating a responsive web page. We can also create the design and layout of the webpage, which is used in creating the web page. We can use media query with the help of @media, which specifies the condition for creating the web page.

Syntax:

To create the media query, we have to follow the syntax below.

@media media-type and (media-feature) {
    /* CSS rules to apply when the media query conditions are met */
}

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f0f0f0;
}

/* Default styles for larger screens */
h1 {
  font-size 24px;
  color: #333;
  background-color: #fff;
}

/* Media query for screens with a width less than 600px */
@media (max-width: 600px) {
  h1 {
    font-size: 20px; /* Decrease font size for smaller screens */
    color: #fff; /* Change text color to white */
    background-color: #007bff; /* Change background color to blue */
  }
}

  </style>
</head>
<body>
  <div class="container">
    <h1>Welcome to javaTpoint</h1>
    <p>This is a simple example of a responsive layout using media queries.</p>
  </div>
</body>
</html>

Output

Explanation

In the above code, we have a default large screen with a font size of 24px, a text color of #333, and a background color of #fff for the h1 element. Also, we have to define the media query as the @media (max-width: 600px). When we change the screen size to 600px, we get to change the font size, color, and background color.

Next TopicCustom Scrollbar CSS

← prev next →