In this article I will show you how to build responsive website with @media query in asp.net. Depending on the web browser size, assign different stylesheets to the css @media Query.
You can apply css style according to the browser widths. For the reason, we need to use @media Query to make a responsive website. A web page automatically adjusts itself for displaying the content in different devices.
Create a new website in visual studio and create a web form then copy and paste the following code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/Style.css" rel="stylesheet" />
</head>
<body>
<div>
Proin sagittis, orci vitae variussodales, nunc enim viverra sapien, in tempus ipsum ligula eu tortor. Aliquamenim urna, elementum in gravida fermentum, facilisis ut tortor. Vivamus vitaeodio non enim bibendum facilisis sit amet vel quam. Vestibulum ante ipsumprimis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullamcondimentum commodo consectetur. Nam ultricies orci est, id sagittis eratullamcorper sit amet. Pellentesque viverra egestas felis, tristique gravidamauris convallis scelerisque. Maecenas pellentesque id ex euismod sagittis.
</div>
</body>
</html>
Create a css stylesheet and copy and paste the following code:
body {
background: black;
font-style: italic;
color: white;
}
@media screen and (max-width:800px) {
body {
background: white;
font-style: normal;
color: black;
}
}
Description: The css stylesheet describes the background:black,color: white and font-style: italic.In the @media query for screen (max-width 800px), background:white,font-style:normal and color:black. If the browser width reaches below 800px, @media screen(max-width:800px) css style will be applied.