HTML Responsive

❮ Prev Next ❯

Responsive Web Design refers to the technique of designing websites that can adapt to various screen sizes and devices, providing a better user experience for users accessing the site from different devices such as desktops, laptops, tablets, and smartphones.

The goal is to create a website that is accessible and functional on all devices.

One way to achieve a responsive design is by using CSS media queries, which allow us to define different styles for different screen sizes.

For example, we can use media queries to adjust the font size, layout, and content of the website based on the user's device.

Here's an example of a responsive design using media queries:

Example 

<!DOCTYPE HTML>
  <html>
    <head>
    <style>
    .body{
      font-size :16px;
    }
    @media onlyscreen and (min-width: 768px){
    /* For desktop and larger screens */
      .body{
        font-size :18px;
      }
      .container{
        display :flex;
        justify-content :space-between;
      }
      .left-column{
        background-color :#ddd;
        padding :20px;
        text-align :center;
        font-size :30px;
        width :30%;
      }
      .right-column{
        background-color :#ccc;
        padding :20px;
        text-align :center;
        font-size :30px;
        width :70%;
      }
    }
    </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <div class="container">
      <div class="left-column">Left column content goes here</div>
      <div class="right-column">Rightcolumn content goes here</div>
    </div>
    </body>
</html>

In this example, the font-size of the website is 16px by default. However, when the screen size is 768px or larger, the font size is increased to 18px, and the layout of the website changes to a two-column layout using flexbox.

By using responsive design techniques like media queries, we can ensure that our website is accessible and functional on all devices, providing a better user experience for all users. Lets us see how to use Computer Code in the next chapter.

❮ Prev Next ❯