What do you need to know about responsive websites?-CSS Tutorial-php.cn

What do you need to know about responsive websites?

PHPz

Release： 2023-09-01 15:57:15

forward

979 people have browsed it

What do you need to know about responsive websites?

What is a responsive website?

If we open a responsive website on any device, the content of each web page will not overflow or be covered by other web pages. For example, open the TutorialsPoint.com website on any size device. Users can observe that the content of the web page remains the same, but the replacement of the content becomes different so that the content is readable.

So, the basic thing of the responsive website is to make content visible and stylish on every device.

Why do we need a responsive website?

Now, the question is why we should require a responsive website. Well, here is the answer.

Earlier, users could access the website from desktop only, but now, users can access the website from devices of different sizes, such as mobile and tablet devices. Even most website traffic comes from mobile devices, not desktop devices.

Nowadays, every business operates on the Internet and tries to attract customers online through a website. If a user accesses your website from a mobile device and your website does not have a responsive design, the user will immediately close your website and go to a competitor's website.

So, a responsive website is useful to get more customers and visitors.

How to start creating a responsive website?

We need to use common breakpoints based on the browser's dimensions and style the HTML elements accordingly. The following are common breakpoints.

Mobile: 360 x 640 px
Tablet: 768 x 1024 px
Laptop: 1366 x 768 px
HDdesktop: 1920 x 1080 px

Copy after login

As a first step, we have to add the following meta tag in the section.

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

Copy after login

Now, our HTML content will remain the same as the web page, but we need to write the CSS in such a way that the HTML content can be easily read on every device.

Example 1 (Set Element Dimensions in Percentage)

In the example below, we have a 'container' div element containing two 'col' div elements. We have set the dimensions of the container div element in the percentage and the dimensions for the 'col' div element in the percentage .

In the output, the user can observe that it is readable on any size device.



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


   Creating the responsive website by setting up dimensions in percentage for the HTML element 
   
      
         Column 1
      
      
         Column 2

Copy after login

Example 2 (Using the Media Query)

In the example below, we use media queries to create a responsive web design. Using media queries we can add breakpoints to web pages and style them individually for each device.

Here, users can observe that we have changed the dimensions of the 'main' div for the devices that have widths less than 600px. Also, we have changed the font-size, font color, and margin for the mobile devices using the media query.



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


    Creating the responsive website by Using the media Queries in CSS 
   
      
      
         The above is a logo of TutorilasPoint. The logo is responsive, and it will be displayed in the centre of
         the screen.

Copy after login

Example 3 (using Clamp function)

In the example below, we have used the clamp() function to make our web page responsive. The clamp() function takes three arguments, and the first is the minimum width, the second is a percentage, and the third is the maximum width.

Here we are passing 400px as the first parameter, 30% as the second parameter, and 600px as the third parameter of the clamp() function, which means that on any device, the width of the card will never be Less than 400px and no more than 600px. If 30% of the screen width is between 400px and 600px, the value will be set to the width of the card.

In the output, users can observe the card on different devices and check if it is responsive.

<html>
<head>
   <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
   <style>
      .card {
         height: 400px;
         width: clamp(400px, 30%, 600px);
         background-color: rgb(13, 247, 247);
         padding: 5px;
         border-radius: 12px;
         border: 2px solid green;
      }
      img {
         height: 90%;
         width: 100%;
         border-radius: 12px;
      }
      .content {
         font-size: 20px;
         font-weight: bold;
         text-align: center;
         padding: 10px;
         color: green;
      }
   </style>
</head>
<body>
   <h2> Creating the responsive website by Using the clamp() function in CSS </h2>
   <div class = "card">
      <img src = "https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg"
      Alt = "tree image">
      <div class = "content">
         Save the Environment!
      </div>
   </div>
</body>
</html>

Copy after login

Example 4 (Introduction to Flexbox)

In the example below, we introduce Flexbox to make responsive web pages. We can use "display flex" to display any HTML element as a Flexbox. Afterwards, we can use various CSS properties to customize the contents of Flexbox.

Here, we have a 'row' div containing multiple 'col' div. The dimensions of the 'row' div change according to the device's dimensions, but the dimensions of the 'col' div are fixed. So, we have used the 'flex-wrap: wrap' CSS property to wrap the content inside the 'row' div. It shows the total number of 'col' divs in the single rows based on the width of the row.

<html>
<head>
   <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
   <style>
      .row {
         height: auto;
         width: 90%;
         margin: 0 auto;
         background-color: yellow;
         padding: 10px 20px;
         border: 2px solid green;
         border-radius: 12px;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
      }
      .col {
         height: 200px;
         min-width: 200px;
         background-color: red;
         border: 2px solid green;
         border-radius: 12px;
         margin: 10px 20px;
      }
   </style>
</head>
<body>
   <h2>Creating the <i> responsive website </i> by Using the media Queries in CSS. </h2>
   <div class = "row">
      <div class = "col">
      </div>
      <div class = "col">
      </div>
      <div class = "col">
      </div>
      <div class = "col">
      </div>
   </div>
</body>
</html>

Copy after login

In this tutorial, users learned how to make a website responsive. The above example shows us various CSS properties, functions, and rules used to make responsive websites. Developers need to combine all of this to produce a live website. Here we use a single attribute in a single example just for learning purposes.

The above is the detailed content of What do you need to know about responsive websites?. For more information, please follow other related articles on the PHP Chinese website!