DEV Community

Cover image for All you know about media queries
BHAVANA S
BHAVANA S

Posted on

1 1

All you know about media queries

While building a website, sometimes we got many confusions about how to make it responsive? what is that responsive mean? what is that media query? why we need that and how to use that?

Cool, you will get an answers for the above questions here, let's go with responsive first

A responsive website will display a different interface depending on what device is used to access the site.

For example, the font-size of text, images width and height, padding, margin, and many other CSS properties will have different values for different screen sizes, like a website may appear one way on a laptop, another way on a tablet, and still another way on a smartphone.

That's what responsive mean, then how to make our website responsive, there are several ways for that,

One method is to dynamically detect the user's platform and load specific HTML and CSS for the corresponding device.

Another option is to use media queries, which automatically loads different CSS styles depending on the size of the browser window.

Then what is the media query? Wait, here we go,

Media query is a feature of CSS, which acts as filters for different screen sizes means it enable the webpage content to adapt to different screen sizes and resolutions.

why we need media queries? because to customize the appearance of websites for multiple devices.

How to use media queries?

Media queries may be inserted within a webpage's HTML or included in a separate .css file referenced by a webpage.

Ex:Alt Text

The media query above activates if a user's browser window is 768 pixels wide or less. This could happen if you shrink your window on a desktop computer or if you are using a mobile device such as a tablet, to view the webpage.

You can also write media queries for different media types like:

  1. Ex: @media print and(max-width:360px){ }
    print define intended for paged material and documents viewed
    on a screen in print preview mode.

  2. Ex: @media screen and(min-width:670px){ }
    Intended primarily for screens.

  3. Ex :@media speech and(max-width:1024px){ }
    Intended for speech synthesizers.

  4. Ex: @media all and (min-width:520px){ } all define suitable
    for all devices.

And at last, like all modules within a cascading stylesheet, the ones that appear further down the list override the ones above them. Therefore the default styles are typically defined first within a CSS document, followed by the media queries for different screen sizes.

For example, the desktop style might be defined first, followed by a media query will styles for tablet users, followed by a media query designed for smartphone users and styles may also be defined in opposite order.

Thanks for reading ,it's my first blog ,happy to hear a feedback and suggestion in comments section

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay