Media Query CSS for Desktop, Tablet, Mobile

By | June 3, 2020

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) {
p{
color:black;
}
}

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..!

Subscribe For Latest Updates

Sign up to best of PHP Code Solutions, informed analysis and opinions on what matters to you.
Invalid email address
We promise not to spam you. You can unsubscribe at any time.

One thought on “Media Query CSS for Desktop, Tablet, Mobile

  1. Pingback: Send PHP mail from Localhost using XAMPP Server - PHPCODER.TECH

Leave a Reply

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