CSS
section{
border:2px solid black;
width:80vw;
margin:auto;
}
h1{
text-align: center;
font-size: 2rem;
}
/media is used to set view for various display sizes/
@media screen and (max-width:1000px){
h1{
color:red;
}
}
@media screen and (max-width:500px){
h1{
color:green;
font-size: 2rem;
}
}
@media screen and (max-width:500px),(orientation:portrait){
section{
background-color: red;
}
}
HTML
<section>
<h1>This is Heading</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nisi quibusdam delectus officiis cupiditate consequatur quae. Amet eos labore voluptatum?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam, ratione!</p>
</section>
</body>
The view doesnt change.