how to create responsive website using css , html without bootstrap Or Responsive Website Using Media query



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

Thank You For Your Great Contribution

Featured Post

Sql dynamic query With Join And search using like query with multiple column

Sql dynamic query With Join And search using like query with multiple column declare @keyword varchar(100) DECLARE @sqlCommand va...

Popular Posts