Ved's Blog

Media Queries in CSS

Ved Dadhich's photo
Ved Dadhich
·

1 min read

Table of contents

No heading

No headings in the article.

Media queries are used to create a responsive web design.We know that view of web page is different at different screen sizes.So through the help of media queries it is decided that how the web page will look at different screen sizes.

Media query decides different break points according to different screen sizes to make responsive web pages.

Syntax

@media not | only mediatype and expression{
//content
}

Example

This example will describe media query with making responsive for different device sizes.

<html>
<head>
    <title>CSS Media Query</title>
    <style>
      body{
        background-color:#E21717;
        }  
      @media screen and (max-width:800px) {
         background-color:#3DBE29;
        } 
      @media screen and (max-width:500px) {   
        background-color:#383CC1;
        }
    </style>
</head>
<body>
    <div class="container">
    <h1>Hello World!</h1>
    <p>This is a Paragraph</p>
    </div>
</body>
</html>

Output

In the output we can see that the background color will change according to diffrent screen sizes.

Thus we can see that media queries helps to make responsive web pages according to diffrent screens. Because there are different type of break points which help to make web pages fully responsive.

iwritecode