How to show HTML elements with different sizes for different devices (Mobile Friendly)

We can show all HTML elements and screens with different sizes for different types of devices by using css3 Media Queries Break Points.

What is Media Query?

Media Query is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). It became a W3C recommended standard in June 2012, and is a cornerstone technology of Responsive web design.

Example:

Here we are showing below 300*300px square box in different dimensions according the the device resolution using Media Queries Break Points.

Default CSS:

.squarebox {
    width:300px;
    height:300px;
}

Displaying above square box with 200*200px in smart phones view:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    .squarebox {
        width:200px;
        height:200px;
    }
}

Displaying the square box with 450*450px ipads and tablets view:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    .squarebox {
        width:450px;
        height:450px;
    }
}

Displaying the square box with 800*800px in desktops and laptops view:

@media only screen 
and (min-width : 1224px) {
    .squarebox {
        width:800px;
        height:800px;
    }
}

Displaying the square box with 1200*1200px in large screens view:

@media only screen 
and (min-width : 1824px) {
    .squarebox {
        width:1200px;
        height:1200px;
    }
}

Thank you.