How to use mobile responsive media query in css

media query css

Any web developer can easily develop the website and make that website live. But if that website does not look right on the mobile, then the user gets the wrong effect.

That user does not come back to that website. For this reason, the website has to be responsive before it is developed or after it is developed. To respond to the website, we have to write CSS in the CSS file itself.

We have to write it inside the media query. Writing CSS in media query has no effect on our desktop version. This makes our website easily mobile responsive. We have given examples of some media queries. You can make your website mobile responsive by using them.

// This media query use for maximum width 767px on the mobile port

@media (max-width: 767px) {

.className { font-size:20px; }

}

// This media query use for minimum width 480px & maximum width 767px on mobile port

@media only screen and (min-width: 480px) and (max-width: 767px) {

.className { font-size:20px; }

}

// This media query use for minimum width 768px & maximum width 991px on iPaid port

@media (min-width: 768px) and (max-width: 991px) {

.className { font-size:20px; }

}

// This media query use for minimum width 992px & maximum width 1024px on iPaid port

@media (min-width: 992px) and (max-width: 1024px) {

.className { font-size:20px; }

}

Leave a Reply

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