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:

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