Media query min and max | media query min and max using html and css
.png "Media query min and max | media query min and max using html and css")
Media query min and max | media query min and max using html and css
Hello…..Welcome to Code with random,Today we are learningt MEDIA QUERY MIN AND MAX.Media query is style based on browser characteristics includes width height etc..
So let see how to create…..
HTML CODE:-
In this code we want to add basic thing like h1,p,div class will be desc(long text description),and p class be orientation.
<body>
<h1>
Testing Media Queries
</h1>
<p>
Resize your browser window to find out how media queries are reporting the
size and orientation of this page.
</p>
<div class="desc"></div>
<p class="orientation">
The orientation is
</p>
</body>
HTML OUTPUT:-
CSS CODE:-
Here we want to colour the text of “testing media queries”and we want to give background colour,padding,border for desc.
/* Copyright 2018 Google LLC.
SPDX-License-Identifier: Apache-2.0 */
/* CSS files add styling rules to your content */
body {
font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
margin: 2em;
}
.desc {
color: #ccc;
background-color: rgba(0, 0, 0, 0.9);
border-radius: 4px;
padding: 10px;
} The max-width of media is 640px,colour will be red and we want to give desc.
@media (max-width: 640px) {
h1 {
color: red;
}
.desc:before {
content: "This browser window is smaller than 640px wide.";
}
}Then for min-width media is 640px and colour will be blueand we want to write desc as give in code.
@media (min-width: 640px) {
h1 {
color: blue;
}
.desc:before {
content: "This browser window is at least 640px wide!";
}
} In this we want to take both min and max here min-width will be 500px and max-width will be 600px,colour is fuchsia then desc will be between 500px to 600px wide.
@media (min-width: 500px) and (max-width: 600px) {
h1 {
color: fuchsia;
}
.desc:after {
content: " In fact, it's between 500px and 600px wide.";
}
}Here the media will be portrait and landscape.
@media (orientation: portrait) {
.orientation:after {
content: " Portrait.";
}
}
@media (orientation: landscape) {
.orientation:after {
content: " Landscape.";
}
}
CSS OUTPUT:-
Finally your MEDIA QUERY MIN AND MAX is done.I hope you found this article helpful.
If you have any doubt or any difficulty to understand comment in comment box.
Hope you guys like it…….
THANKYOU………
WRITTEN_BY_SAYALI KHARAT
