HTML CSS MEdia Query
what is viewPort:View Port is a user visible part of any webpage. what ever you see on webpage and view port manage with of content or a page in responsive website
How To Set View Port:
ex:- <meta name="viewport" content="width=device-width, initial-scale=1.0">
What is Responsive Website :
An Responsive Website is a Type of Website which is suitable for all type's of Devices Like mobile Devices,teblat Devices,laptop ,and PC.Any of the devices browse the website that essly manage there all content autometically no need to write deffrent code for each and every device .only one Responsive website
how to create responsive website:
There are two ways to developed responsive website
1).built in repository like bootstrap
2).Create Your Own code using html css (usign Media query)
what is media query:
It is usesd the @media rule to include a block of CSS properties only if a certain condition is true.
example:
________________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: red;
}
@media only screen and (max-width: 768px) {
body {
background-color: silver;
}
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
@media only screen and (max-width: 420px) {
body {
background-color: green;
}
}
@media only screen and (max-width: 360px) {
body {
background-color: yellow;
}
}
</style>
</head>
<body>
<ol>
<li>
<p>
Resize the browser window. When the width of this document is greater then 768 pixels or more, the background-color is "red".</p>
</li>
<li>
<p>
Resize the browser window. When the width of this document is 768 pixels or less, the background-color is silver </p>
</li>
<li>
<p>
Resize the browser window. When the width of this document is 420 pixels or less, the background-color is "green" .</p>
</li>
<li>
<p>
Resize the browser window. When the width of this document is 360 pixels or less, the background-color is yellow </p>
</li>
</ul>
</body>
</html>
_________________________________________________________________________________
No comments:
Post a Comment