Responsive Web Design

Responsive Website

Responsive web design is one of the most important area of CSS layout Design. Responsive Website means a website that responds well on all screen devices, i.e. desktop, laptops/ Ipads/Tablets, Smartphones and Smart TV. To build a responsive website using media queries, configure viewport first, and then add media queries in css.

Desktop vs Mobile vs Tablet Users

Mobile Users resolution

Responsive Website Requirement

• Viewport
• Media Queries

Viewport

Viewport or meta viewport is a meta tag used in head. By using meta viewport, we can build a responsive website using media queries and the website will display properly on all screen devices.

Meta Viewport was introduced in HTML5 only. This means HTML5 based website with meta viewport can be mobile friendly.

Viewport Example

This will enable proper rendering of content with zooming.

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

Viewport with user scalable no

This viewport will enable proper rendering on mobile devices, but no zooming allowed on touch devices.

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

Full Viewport on Iphone Landscape

This viewport will cover full landscape mode of iphones 10 and above with notch or pill in Iphone 14Pro, 15, 15 pro and above.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Media Queries

Media queries are used in css using @media rule to specify the type of media we are using. Like screen, print etc. See example

Media Types

Media Type mean the type of media device, like screen based devices, print for printers, all or speech based devices ( for disabled persons, like blind).

• all ( Default media )
• screen
• print
• speech

Media Features

Media Feature means the feature of media type. For example, screen means any screen, laptop or mobiles. So with screen, we use media feature like max-width, orientation etc to choose particular type of screen.

• Width
• Height
• min-width
• min-height
• max-width
• max-height
• aspect-ratio
• orientation

@media screen

@media screen enable css rule for screen devices only. For example, Desktops, Laptops, Smart TVs, Tabs , Ipads, Smartphones etc.

<style>                    
    @media screen{
        body{ font-family: sans-serif;}
    }
</style>                    
                

@media screen with features

Using media screen with feature is best recommended way for responsive web design. We can use various features like min-width or max-width for different different screens or devices.

Using min-width or max-width

<style> 
    html{ font-size: 15px; }

    @media screen and (max-width:1000px){   
        html{ font-size: 13px; }
    }
</style>

<style> 
html{ font-size: 15px; }
    
@media screen and (width<=1000px){   
    html{ font-size: 13px; }
}
</style>

@media print

@media print rule works only for printing devices. For example, laser printers, inkjet printers, dot matrix printers etc.

<style>                    
    @media print{
        body{ font-family: serif;}
    }
</style>                    
                

Break Points

Break Points are defined in @media feature to set condition for css selector. The CSS code inside @media will works only if condition is matched. Else it will not work. Based on current available devices, we are defining some break points for media queries.

How to build Responsive Website

To build a responsive website, we use media queries with media features. This combination can target css for a particular device based on media type and feature. See examples below.

If .container is our parent class having width 1200px, this fixed width will works only for screen size greater than 1200px, i.e. desktops, laptops, smart TVs etc.

For devices less than 1220px(break point), we are using media rules to change width of.container as per screen size.

Responsive website for Desktop, Tablets and mobile

<style> 
    *{ 
        margin:0; 
        box-sizing:border-box;
    } 
    
    .container{ 
        width:1200px; 
        margin:auto; 
        display:flex; 
        flex-flow:row wrap;
    }
    .col{ 
        flex: 1 0 25%; 
        max-width:25%;
    }
   
    @media screen and (max-width:1220px){
        .container{ width:960px;}
    }
    
    @media screen and (max-width:980px){
        .container{ width:760px}
        .col{ 
            flex: 1 0 50%; 
            max-width:50%;
         }
    }
                      
    @media screen and (max-width:767px){
        .container{ width:100%}
    }
    
    @media screen and (max-width:460px){
        .col{ 
            flex: 1 0 100%;
            max-width:100% 
        }
    }
</style>                     
                

Responsive Image

By default, images are not responsive, they take full width of own or value of width attribute. For high resolution image, prefer picture tag. For low resolution images, we can use css max-width property.

Image without width and height attribute

    <style>
        .img-resp{
            max-width:100%;
        }
    </style>

    <img src="img/logo.png" alt="" class="img-resp">

Image with width and height attribute

    <style>
        .img-resp{
            max-width:100%;
            height:auto;
        }
    </style>
    
    <img src="img/banner.png" alt="" width="600" height="450" class="img-resp">