How to learn Responsive Web Design with @media query in asp.net?

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=”viewportcontent=”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:

What Is Responsive Web Design

Responsive Web Design with @media query in asp.net

I hope this post well help you…..

 

Leave a Reply

Your email address will not be published. Required fields are marked *

2 + 1 =


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">