CSS Media Queries
Media QueriesIn this lesson, we will learn about media queries and how to implement it in CSS to make responsive web design.
Understanding Media Queries
Media queries are a fundamental concept used in CSS to make web pages responsive to different devices and screen sizes. Think of media queries as a way to apply specific CSS styles based on certain conditions, such as the screen width, height, or device characteristics.
Key Components of Media Queries
Media queries consist of three main components and they are:
- Media Type: This specifies the type of media the query applies to, such as screen for computer screens and print for printing. Screen is the most common type used for web design.
- Media Features: These are the conditions or criteria that determine when the styles inside the query should be applied. Common media features are:
- min-width: The minimum width of the viewport.
- max-width: The maximum width of the viewport.
- resolution: The screen resolution.
- Styles: The CSS styles you want to apply if the media query's conditions are met. These styles define how your web content should look and behave under specific conditions.
The Basic Syntax
A CSS Media Query looks like this.
@media screen and (max-width: 600px) {
/* Your styles for screens with a width less than or equal to 600px go here */
}
@media print and (max-width: 600px) {
/* Your styles for print with a width less than or equal to 600px go here */
}Let's break it down.
- @media is the declaration that starts a media query.
- screen means it applies to screens (like your computer or phone).
- print means it applies to print (when you print the web page).
- (max-width: 600px) is the condition. In this case, it means "apply these styles when the screen width is 600 pixels or less."
How to Test Media Queries
You can test your media queries by resizing your browser window. Watch how the styles change as you make the window narrower or wider. It's a great way to see if your web page looks good on all screen sizes.
Practical Use of Media Queries
Media queries are used for creating responsive web designs. By using media queries, you can do things like:
- Adjust the layout of your web page for different screen sizes, ensuring it looks good on both desktop and mobile devices.
- Change font sizes or spacing to improve readability on various screens.
- Hide or show elements depending on the device, like navigation menus that are hidden on small screens.
- Optimize print styles to control how your webpage appears when printed on paper.
Example 1: Making Text Bigger on Small Screens
Suppose you want to make the text bigger when the screen is small. Here's how you do it:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries Example</title>
<!-- Internal CSS -->
<style>
@media screen and (max-width: 600px) {
p {
font-size: 25px;
}
}
</style>
</head>
<body>
<p>With the help of media query we are changing the font size this paragraph when the screen width is 600px or less.</p>
</body>
</html>This code says, "Hey, when the screen is 600 pixels wide or less, make all the paragraphs have a font size of 25 pixels."
Example 2: Changing Background Color
Let's say you want to change the background color on tiny screens:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries Example</title>
<!-- Internal CSS -->
<style>
@media screen and (max-width: 400px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>With the help of media query we are changing the background color of the web page when the screen width is 400px or less.</p>
</body>
</html>With this, you're telling the website, "When the screen is 400 pixels wide or less, turn the background color light blue."
Example 3: Hiding Elements
Sometimes, on really small screens, you might want to hide something. For instance, let's hide a div element from the web page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries Example</title>
<!-- Internal CSS -->
<style>
.box1 {
width: 200px;
height: 150px;
background-color: yellow;
margin-bottom: 10px;
}
.box2 {
width: 180px;
height: 100px;
background-color: lightblue;
}
@media screen and (max-width: 576px) {
.box1 {
display: none;
}
}
</style>
</head>
<body>
<div class="box1">Box1</div>
<div class="box2">Box2</div>
<p>With the help of media query we are hiding box1 when the screen width is 576px or less.</p>
</body>
</html>Example 4: Using Multiple Media Queries
You can use multiple media queries to target multiple screen sizes.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries Example</title>
<!-- Internal CSS -->
<style>
.box1 {
width: 200px;
height: 150px;
background-color: yellow;
margin-bottom: 10px;
}
.box2 {
width: 180px;
height: 100px;
background-color: lightblue;
}
@media screen and (max-width: 768px) {
.box1 {
background-color: red;
width: 300px;
}
.box2 {
background-color: darkviolet;
}
}
@media screen and (max-width: 576px) {
.box1 {
display: none;
}
.box2 {
background-color: cyan;
height: 50px;
}
}
</style>
</head>
<body>
<div class="box1">Box1</div>
<div class="box2">Box2</div>
</body>
</html>Example 5: Using Multiple Conditions
You can get more creative by combining conditions. For example, you could make changes for screens between certain sizes.
@media screen and (min-width: 600px) and (max-width: 900px) {
/* Your styles for screens between 600px and 900px wide */
}