Media Query Different Dimension of Screens

What is Responsive Web Design?

Responsive web design makes your net web page look good on all units.
Responsive web design makes use of solely HTML and CSS.
Responsive web design isn’t a program or a JavaScript.

Media query is a CSS technique introduced in CSS3. Media query is used if you wish to make a webpage responive.

Small   320×569, 360×640, 480×854
Medium  960×540
Large 1024×640, 1366×768, 1920×1080

Example: Large 1024×640

@media only screen and (max-width: 1024px){
   
    .fade-blackimg {
        padding: 20px 25px;
    }
    .box-second { 
        min-height: 306px;
    }
}

Example: Large 1366×768

@media only screen and (max-width: 1366px){
   
    .fade-blackimg {
        padding: 15px 75px;
    }
    .box-second { 
min-height: 408px;}
}

Example: Large 1920×1080

@media only screen and (max-width: 1920px){
    .fade-blackimg {
        padding: 122px 120px;
     }
     .box-second { 
        min-height: 575px;
     }
}

Leave a Reply

Your email address will not be published. Required fields are marked *