CSS - CSS media queries min-width and max-width

Media queries are useful when you want to modify your site or app depending on a device's general type (such as print and screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

What is different between (Min-width and Max-width) in css media queries?

When we setting up min-width for some style it's mean we are goin to apply the style from "maximum-width" to "minimum-width"

For example:

@media only screen and (min-width: 768px) {
    .container {
       background-color: red;
    }
}

This will apply to devices that has screen size minimum from 768px to the maximum screen.

When we setting up max-width for some style it's mean we are goin to apply the styles from the "max-width" we gived to the "min-width"

For example:

@media only screen and (max-width: 768px) {
    .container {
        background-color: green;
    }
}

This will apply to devices that has screen size maximum from 768px - to the minimum screen.

0 Comments

Related Post

There are no posts related to this blog!