Home / HTML / Responsive

HTML Responsive

What is Responsive HTML?

Responsive HTML creates web pages that look good on all devices (desktops, tablets, and phones). Responsive design uses HTML features and CSS techniques to automatically adjust, hide, shrink, or enlarge content to make it look good on any screen size.

The Viewport Meta Tag

The viewport meta tag is essential for responsive design. It controls how the page is displayed on mobile devices:

Example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Page</title>
</head>
<body>
    <h1>Responsive Web Page</h1>
</body>
</html>

Viewport Meta Tag Explained

The viewport meta tag has several properties:

width=device-width

Sets the width of the viewport to match the device's screen width.

initial-scale=1.0

Sets the initial zoom level when the page is first loaded.

Other Viewport Properties

Example
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Responsive Images

Images should scale to fit their container. Use CSS to make images responsive:

Example
<style>
    img {
        max-width: 100%;
        height: auto;
    }
</style>
<img src="image.jpg" alt="Responsive image">

Responsive Text

Use relative units for text size to make it responsive:

Example
<style>
    body {
        font-size: 16px; /* Base size */
    }
    h1 {
        font-size: 2em; /* Relative to base */
    }
    p {
        font-size: 1rem; /* Relative to root */
    }
    @media (max-width: 600px) {
        body {
            font-size: 14px; /* Smaller on mobile */
        }
    }
</style>

Responsive Tables

Tables can be made responsive by allowing horizontal scrolling on small screens:

Example
<style>
    .table-container {
        overflow-x: auto;
    }
    table {
        width: 100%;
        min-width: 600px;
    }
</style>
<div class="table-container">
    <table>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
        </tr>
    </table>
</div>

Media Queries

Media queries allow you to apply different styles for different screen sizes:

Example
<style>
    .container {
        padding: 20px;
    }
    /* Mobile first - default styles */
    .content {
        width: 100%;
    }
    /* Tablet */
    @media (min-width: 768px) {
        .content {
            width: 75%;
        }
    }
    /* Desktop */
    @media (min-width: 1024px) {
        .content {
            width: 50%;
        }
    }
</style>
<div class="container">
    <div class="content">Responsive content</div>
</div>

Common Breakpoints

Standard breakpoints for responsive design:

Example
<style>
    /* Mobile devices (up to 767px) */
    @media (max-width: 767px) {
        body { font-size: 14px; }
    }
    /* Tablets (768px to 1023px) */
    @media (min-width: 768px) and (max-width: 1023px) {
        body { font-size: 16px; }
    }
    /* Desktop (1024px and above) */
    @media (min-width: 1024px) {
        body { font-size: 18px; }
    }
</style>

Flexible Grid Layout

Use percentage widths or flexbox for flexible layouts:

Example
<style>
    .row {
        display: flex;
        flex-wrap: wrap;
    }
    .col {
        flex: 1;
        padding: 10px;
        min-width: 250px;
    }
</style>
<div class="row">
    <div class="col" style="background-color: lightblue;">Column 1</div>
    <div class="col" style="background-color: lightgreen;">Column 2</div>
    <div class="col" style="background-color: lightyellow;">Column 3</div>
</div>

Best Practices

← HTML Layout HTML Buttons →