Media Query CSS for Desktop, Tablet, Mobile

What is Media Queries in CSS?

Media queries are the CSS features used to develop responsive websites. Means media queries help to adapt web page content to different sizes according to screen resolutions. They are responsible for responsive web design and used to customize the web page design or web design for multiple resolution devices.

Media queries are included in HTML pages or written as an internal CSS on the same web page. Media queries CSS can also be included on a separate.CSS file. Here are we showing all devices media queries.

Media Queries For Different Resolution Devices

media queries in css

Laptops, Desktop

Tablets, Ipads (portrait)

Low-Resolution Tablets, Mobiles (Landscape)

Use of Media Queries with Example

In media queries, min-width or max-width is the breaking point of the screen resolution. For example, when set the min-width at 360px, on that condition if you set CSS property change color to black on that point, it changes that. Checkout below code,
@media (min-width: 320px) and (max-width: 480px) {

On the above code, we set  (min-width: 320px) and (max-width: 480px), both are break point. On that point paragraph color change to BLACK

Also, Check: PHP EDITOR

Google Sheet Integration with WordPress without Plugin

Here is all device media queries in CSS.

Happy Coding..!

Was this article helpful?
My name is Bikash Kr. Panda. I own and operate PHPCODER.TECH. I am a web Programmer by profession and working on more than 50 projects to date. Currently I am working on the web-based project and all the CMS and frameworks which are based on PHP.
Posts created 188

2 thoughts on “Media Query CSS for Desktop, Tablet, Mobile

Leave a Reply

Your email address will not be published.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top