Article Categories

Selected Reading

How to create a responsive website that will work on all devices, PC, laptop, tablet, and phone?

CSS Web Development Front End Technology

A responsive website adapts to different screen sizes and works seamlessly across all devices including desktops, tablets, and mobile phones. The key technique for creating responsive designs is using CSS Media Queries along with flexible layouts.

Syntax

@media screen and (max-width: value) {
    /* CSS rules for smaller screens */
}

Method 1: Using Media Queries

Media queries allow you to apply different CSS styles based on screen size. Here's how to create a complete responsive website −

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Website</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .header {
            padding: 60px 20px;
            text-align: center;
            background: #7b1abc;
            color: white;
        }
        
        .header h1 {
            font-size: 2.5rem;
        }
        
        nav {
            background-color: #333;
            overflow: hidden;
        }
        
        .nav-links {
            display: inline-block;
            color: #b8a9fd;
            text-decoration: none;
            padding: 14px 20px;
            font-size: 1rem;
            transition: background-color 0.3s;
        }
        
        .nav-links:hover {
            background-color: #555;
        }
        
        .nav-links.active {
            background-color: #007acc;
        }
        
        main {
            padding: 30px 20px;
            background-color: #f9f9f9;
            min-height: 400px;
        }
        
        .content-section {
            margin-bottom: 30px;
        }
        
        .content-section h2 {
            color: #333;
            margin-bottom: 10px;
        }
        
        .footer {
            padding: 20px;
            text-align: center;
            background: #e74c3c;
            color: white;
        }
        
        /* Mobile Responsive Styles */
        @media screen and (max-width: 768px) {
            .header h1 {
                font-size: 2rem;
            }
            
            .nav-links {
                display: block;
                text-align: center;
                padding: 12px;
            }
            
            main {
                padding: 20px 15px;
            }
            
            .content-section h2 {
                font-size: 1.5rem;
            }
        }
        
        @media screen and (max-width: 480px) {
            .header {
                padding: 40px 10px;
            }
            
            .header h1 {
                font-size: 1.8rem;
            }
            
            .nav-links {
                font-size: 0.9rem;
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Responsive Website</h1>
    </div>
    
    <nav>
        <a class="nav-links active" href="#">Home</a>
        <a class="nav-links" href="#">About</a>
        <a class="nav-links" href="#">Services</a>
        <a class="nav-links" href="#">Contact</a>
    </nav>
    
    <main>
        <div class="content-section">
            <h2>Welcome to Our Site</h2>
            <p>This website adapts to different screen sizes using CSS media queries. Resize your browser window to see how the layout changes.</p>
        </div>
        
        <div class="content-section">
            <h2>Responsive Design</h2>
            <p>On larger screens, the navigation appears horizontally. On mobile devices, navigation links stack vertically for better usability.</p>
        </div>
    </main>
    
    <div class="footer">
        <h2>Footer Section</h2>
    </div>
</body>
</html>

A responsive website with a purple header, dark navigation menu, content area, and red footer. On desktop, navigation links appear horizontally. When viewed on mobile (screen width below 768px), navigation links stack vertically and text sizes adjust appropriately.

Key Responsive Design Principles

Technique	Purpose	Implementation
Viewport Meta Tag	Ensures proper scaling on mobile	<meta name="viewport" content="width=device-width, initial-scale=1.0">
Flexible Units	Scalable typography and spacing	Use rem, em, % instead of fixed px
Media Queries	Different styles for different screen sizes	@media screen and (max-width: 768px)
Box-sizing: border-box	Predictable element sizing	Includes padding and border in width

Common Breakpoints

Standard breakpoints for responsive design −

/* Mobile devices */
@media screen and (max-width: 480px) { }

/* Tablets */
@media screen and (max-width: 768px) { }

/* Desktop */
@media screen and (max-width: 1024px) { }

Conclusion

Creating responsive websites requires using media queries, flexible units, and the viewport meta tag. These techniques ensure your website provides an optimal viewing experience across all devices and screen sizes.

AmitDiwan

Updated on: 2026-03-15T15:14:09+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next