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.
Post your comments / questions
Recent Article
- OSError: cannot open resource - Python
- Python read file line count
- How to Encode & Decode using Base64 in Python?
- Unspecified error-The function is not implemented. Rebuild the library with Windows, GTK+ 2.x or Cocoa support.
- How to generate a Captcha verification code image with Python?
- How to show an image using path python PIL?
- How to remove Background from the images using Python?
- Python generate QR code image
Related Article