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;
     }
}