HTML

HTML

📌 What is Responsive Web Design?

Responsive Web Design is an approach that allows a website to automatically adapt to different screen sizes (desktop, tablet, and mobile devices).

The main goal is:

No matter which device the user uses, the website should appear readable, organized, and user-friendly.

To achieve this, the following techniques are commonly used:

  1. Viewport setting
  2. Flexible (responsive) images
  3. Media queries (different CSS rules for different screen sizes)
  4. Using different images for different devices

🔹 2. Viewport Setting

One of the fundamental steps in responsive design is setting the viewport. For this, the following meta tag is added inside the <head> section:

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

The purpose of this tag:

  1. width=device-width → Sets the page width equal to the device’s screen width
  2. initial-scale=1.0 → Sets the initial zoom level to normal (100%) when the page loads

If this tag is not used, mobile devices shrink the page to fit the screen, making the content appear very small.

🔹 3. Responsive (Flexible) Images

Images should also adapt to different screen sizes.

a) Using percentage width

HTML
<img src="image.jpg" style="width:100%; height:auto;">
  1. The image fills the entire width of its container
  2. Height adjusts automatically
  3. However, it may enlarge the image and reduce quality

b) Using max-width

HTML
<img src="image.jpg" style="max-width:100%; height:auto;">
  1. The image never exceeds its original size
  2. It can shrink but does not enlarge
  3. This helps maintain image quality

c) Using different images for different screens

HTML

<picture>
    <source srcset="small.jpg" media="(max-width: 600px)">
    <source srcset="medium.jpg" media="(max-width: 1500px)">
    <img src="large.jpg" alt="Description">
</picture>
  1. The browser selects the appropriate image based on screen size
  2. Smaller screens load smaller images
  3. This improves both performance and visual quality

4. Responsive Text Size

Text can also adapt to screen size:

HTML
<h1 style="font-size:10vw">Hello World</h1>
  1. The vw unit is based on viewport width
  2. 1vw = 1% of the screen width
  3. This allows text to scale dynamically with the screen size

5. Media Queries

Media queries allow you to apply different CSS rules based on screen size.

Example:

HTML

/* Large screens */
    .left, .right {
        float: left;
        width: 20%;
    }
    .main {
        float: left;
        width: 60%;
    }

/* Small screens */
    @media screen and (max-width: 800px) {
        .left, .main, .right {
             width: 100%;
        }
    }
  1. On large screens, elements are displayed side by side
  2. On small screens, they stack vertically
  3. This ensures mobile compatibility

Media queries are one of the most important parts of responsive design.

6. General Logic (Example Explanation)

When creating a responsive page, the following structure is usually used:

  1. Build a flexible layout using Flexbox or Grid
  2. Use percentage or flexible values for sizing elements
  3. Control images with max-width
  4. Apply media queries for smaller screens

For example:

  1. On large screens, 3 columns appear side by side
  2. On small screens, each takes 100% width and stacks vertically

  • 🎯 Short Summary

  • The main idea of responsive design is:
  • Making a website flexible so it looks good on all devices.
  • To achieve this:
  • Set the viewport
  • Make images flexible
  • Use media queries
  • Build layouts with Flexbox or Grid

Html Layout Elements and Techniques
Html Code