We can use @media query in CSS file.
CSS media queries to assign different stylesheets depending on browser window size.
@media query css style sheet applied according to the browser widths.
We also use @media query to design Responsive website.
Responsive web design approach, a web page can adjust itself on the device it’s being displayed on.
Example of @media query
Create new website in visual studio, and create new stylesheet in asp.net.
Apply the Stylesheet on webform….
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>Untitled Page</title><meta name=”viewport” content=”width=device-width, initial-scale=1” />
<link href=”StyleSheet.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<form id=”form1″ runat=”server”>
<div></div>
</form>
</body>
</html>
The StyleSheets file code :
body
{
background:Blue;
}@media screen and (max-width:800px)
{
body
{
background:Red;
}}
Here, we create stylesheet with @media query.
The Stylesheet Describe the body background color Blue of webpage, but when we changed width of browser up to maximum 800px body background color will be Red.
The output of @media query is:
I hope this post well help you…..