Introduction to CSS Media Queries
Introduction to Media Queries
Media queries are a CSS technique that allows you to apply different styles to your website depending on the characteristics of the device displaying it. This is crucial for responsive web design, ensuring your website looks good and functions properly on all devices (desktop, tablet, mobile).
Basic Syntax
@media (media_feature1) and (media_feature2) {
/* CSS styles applied only if conditions are met */
}
Common Use Cases
- Responsive layout changes: Adjust column widths, font sizes, image sizes for different screen sizes.
- Hide/show elements: Show/hide certain elements on smaller screens for cleaner layouts.
- Optimize for print: Different styles for printing (e.g., remove navigation, adjust colors).
- Accessibility: Adapt styles for assistive technologies like screen readers.
Sample Media Query using min-width condition on a division with the class name container
@media screen and (min-width:600px){
.container
{
background-color: brown;
}
}
Sample Media Query using max-width condition on a division with the class name container
@media screen and (max-width:500px){
.container
{
background-color: brown;
}
}
Sample Media Query using min-height condition on a division with the class name container
@media screen and (min-height:300px){
.container
{
background-color: brown;
}
}
Sample Media Query using landscape orientation condition on a division with the class name container
@media screen and (orientation:Landscape){
.container
{
background-color: brown;
}
}
Sample Media Query using portrait orientation condition on a division with the class name container
@media screen and (orientation:portrait){
.container
{
background-color: brown;
}
}
Sample Media Query using max-height on a division with the class name container
@media screen and (max-height:300px){
.container
{
background-color: brown;
}
}
Sample Media Query using min-width AND min-height conditions and on a division with the class name container
@media screen and (min-width:700px) and (min-height:300px){
.container
{
background-color: brown;
}
}
Sample Media Query using min-width OR min-height conditions and on a division with the class name container
@media screen and (min-width:700px),(min-height:300px){
.container
{
background-color: brown;
}
}
Sample Media Query using print for styling a division while printing it
@media print{
.container
{
background-color: brown;
}
}
Sample Media Query using ALL for styling a division for both printing and screens
@media all{
.container
{
background-color: brown;
}
}
Sample Media Query using not keyword for reversing the conditions. The styling is applied for other media except screens
@media not screen {
.container
{
background-color: brown;
}
}
Exercise 1 - Using Media Queries to create a responsive web page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries Tutorial</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<header>
Welcome to codespindle
</header>
<div class="container">
<div class="item1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorem eligendi minima debitis earum nulla tempore provident nobis? Reprehenderit cumque quaerat dolorum voluptatem earum vitae, veritatis alias doloribus dignissimos, impedit dolore, perspiciatis sit tenetur quam quis nam maiores porro. Repudiandae molestias impedit possimus blanditiis fugiat fugit at nisi officiis debitis.</p>
<img src="images/caption.JPG" alt="Table image" id="firstimage">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi, esse! Nihil illum in dicta odit voluptas ratione facilis tenetur doloribus accusamus ipsum, nobis laboriosam consequuntur reiciendis magni, voluptates temporibus dolorem.</p>
</div>
<div class="item2">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, blanditiis?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, blanditiis?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, blanditiis?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, blanditiis?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, blanditiis?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, blanditiis?</li>
</ul>
</div>
</div>
</body>
</html> CSS code
.container
{
display:flex;
flex-wrap: wrap;
row-gap: 10px;
column-gap: 10px;
}
.container>div
{
background-color:aqua;
height: 200px;
width: 200px;
}
.container > div:nth-child(odd)
{
background-color:gray;
}
@media only screen and (max-width:500px)
{
.container{
flex-direction: column;
}
.container>div{
width:100%;
}
} Output when the screen size is greater than 500px
Output when the screen size is lesser than 500px
Exercise 2 - Using Media Queries to create a responsive web page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries Tutorial</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div class="container">
<div class="item1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorem eligendi minima debitis earum nulla tempore provident nobis? Reprehenderit cumque quaerat dolorum voluptatem earum vitae, veritatis alias doloribus dignissimos, impedit dolore, perspiciatis sit tenetur quam quis nam maiores porro. Repudiandae molestias impedit possimus blanditiis fugiat fugit at nisi officiis debitis.</p>
<img src="images/caption.JPG" alt="Table image" id="firstimage">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi, esse! Nihil illum in dicta odit voluptas ratione facilis tenetur doloribus accusamus ipsum, nobis laboriosam consequuntur reiciendis magni, voluptates temporibus dolorem.</p>
</div>
<div class="item2">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, blanditiis?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, blanditiis?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, blanditiis?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, blanditiis?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, blanditiis?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, blanditiis?</li>
</ul>
</div>
<div class="item3">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
</body>
</html>CSS code
.container
{
display:flex;
height: 100vh;
width: 100vw;;
}
.container> div:nth-child(1)
{
flex:25%;
background-color: aqua;
padding:20px;
text-align: justify;
}
#firstimage
{
padding-left: 5em;
}
.container>div:nth-child(2)
{
flex:50%;
background-color: brown;
}
.container>div:nth-child(3)
{
flex:25%;
background-color:aqua;
}
.container>div:nth-child(2) ul li
{
color:white;
line-height: 40px;
font-size: 1.5rem;
}
.container>div:nth-child(3) ul li
{
color:black;
line-height: 50px;
font-size: 1.5rem;
}
@media screen and (max-width:500px)
{
.container
{
flex-direction: column;
}
} Output when the screen size is greater than 500px
Output when the screen size is lesser than 500px
