| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
Media queries in CSS allow you to apply styles based on the characteristics of the device rendering the content, such as the screen size, orientation, resolution, and more. They are a key component of responsive web design, enabling websites to adjust their layout and appearance to suit different devices.
Syntax
A media query is made up of a media type and one or more expressions that check for the conditions of particular media features. Here is the basic syntax:
@media media-type and (media-feature: value) {
/* CSS rules */
}
@media: This keyword initiates the media query.media-type: Specifies the type of device (e.g.,screen,print,all). If omitted, ‘all‘ is assumed.- ‘
media-feature‘: Specifies a characteristic of the user’s device, such as ‘min-width‘, ‘max-width‘, ‘orientation‘, etc. - ‘
value‘: The value associated with the media feature.
Common Media Types
- ‘
all‘: Suitable for all devices. - ‘
print‘: Used for printers. - ‘
screen‘: Intended primarily for screens.
Common Media Features
widthandheight: Width and height of the viewport.min-widthandmax-width: Minimum and maximum width of the viewport.orientation: Orientation of the device (e.g.,portraitorlandscape).resolution: Resolution of the output device (e.g.,dpiordpcm).
Examples
Basic Example
This example changes the background color of the body for devices with a screen width of 600px or less.
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Multiple Conditions
This example applies styles only when the device is in landscape orientation and has a minimum width of 600px.
@media screen and (min-width: 600px) and (orientation: landscape) {
body {
background-color: lightgreen;
}
}
Using Media Queries in a Responsive Design
Here’s a more comprehensive example that adjusts the layout for different screen sizes:
/* Default styles (for large screens) */
body {
font-size: 16px;
background-color: white;
}
header {
background-color: navy;
color: white;
padding: 20px;
text-align: center;
}
nav {
float: left;
width: 25%;
height: 300px; /* only for demonstration, better use min-height */
background: lightgray;
padding: 20px;
}
section {
float: left;
width: 70%;
padding: 20px;
}
/* Styles for tablets (600px to 900px) */
@media screen and (min-width: 600px) and (max-width: 900px) {
nav, section {
width: 100%;
float: none;
}
}
/* Styles for phones (less than 600px) */
@media screen and (max-width: 599px) {
body {
font-size: 14px;
}
header {
padding: 10px;
}
nav, section {
width: 100%;
float: none;
}
}
- The default styles are applied to large screens.
- For devices with widths between 600px and 900px, the
navandsectionelements stack vertically, taking up 100% width. - For devices with widths less than 600px, the font size is reduced, and padding for the
headeris decreased, withnavandsectionelements also stacking vertically.
Media Queries with Different Media Types
/* Print styles */
@media print {
body {
font-size: 12pt;
}
nav {
display: none; /* Hide navigation in print */
}
section {
width: 100%;
}
}
This example hides the navigation bar and adjusts the font size when the content is printed.
Using Variables with Media Queries (CSS Custom Properties)
:root {
--main-bg-color: white;
}
@media screen and (max-width: 600px) {
:root {
--main-bg-color: lightblue;
}
}
body {
background-color: var(--main-bg-color);
}
Here, the background color of the body is set using a CSS variable, which changes based on the screen width.
Media queries are a powerful tool in CSS for creating responsive designs that adapt to different devices and screen sizes. By using media queries, you can ensure that your website provides an optimal viewing experience across a wide range of devices.
