Being flexible is a demand of today's world, so our website should be. As screen sizes differ in different devices like laptops,iPad, Mobile phones and it makes the user experience worst when we don't have responsive websites. Media Query helps us to make the website responsive for any screen size and format. As we have found errors sometimes when running websites with different cell phones having different screen ratios and sizes which sometimes becomes a serious issue in handling the websites. So we can also add multiple media queries for a number of screen sizes so that in any cell phone or in tabs, the website looks beautiful and all the content is visible.

Along with media queries, the right CSS input helps to maintain the website and its content in the right order and is also responsible for a clean browser HTML page, CSS is a styling tool that can be added to HTML elements directly in tags, by adding a style link in the head of HTML. So without CSS, we cannot manage the appearance of our HTML file in the browser which is visible to the user, and for making HTML beautiful specific functions in CSS are applied to give the premium appearance to the browser

There are some methods for a responsive website with the help of media query:

1 Adding media query to existing style.css file like

@media screen and (max-width:600px) {body{
color :red;
align-text:center;
}}

2 or Making new CSS file for another screen size and linking it to HTML file with media queries like

<link rel="stylesheet" media="screen and (max-width:1170px)" href="tablet.css">

3 We can also provide min-width to media queries

@media screen and (min-width: 480px) {body{ color :red; align-text:center;} }

Connect with me 👋 click here