CSS Media Query Property
CSS Media Query Property is a powerful feature that allows you to apply different CSS styles based on the characteristics of the device or viewport on which your website is being displayed. This is a cornerstone of Responsive Web Design, enabling your website to adapt seamlessly to various screen sizes, resolutions, and even device capabilities. Using CSS Google Fonts is a straightforward way to enhance the typography of your website. Here’s how you can do it:
Purpose:
Adapt Layouts: Modify the arrangement of elements (e.g., switch from a multi-column layout on desktop to a single-column layout on mobile).
Adjust Font Sizes: Make text more readable on smaller or larger screens.
Change Images: Serve different image sizes or even entirely different images based on screen size or resolution.
Hide or Show Elements: Display or hide specific content based on the device.
Optimize for Different Devices: Tailor the user experience for desktops, tablets, and mobile phones.
Consider Print Styles: Apply specific styles when the user prints the webpage.
Syntax:
@media (media-feature) {
/* CSS rules to apply when the media feature is true */
}
@media (media-feature) and (another-feature) {
/* CSS rules to apply when both features are true */
}
@media screen and (max-width: 768px) {
/* Styles for screens with a maximum width of 768 pixels (typical for tablets) */
body {
font-size: 16px;
}
.sidebar {
display: none; /* Hide the sidebar on smaller screens */
}
.main-content {
width: 100%;
}
}Key Components:
@media: The at-rule that indicates the start of a media query.
media-type (optional but recommended): Specifies the type of media the styles are intended for. Common values include:
- screen: For computer screens, tablets, and smartphones.
- print: For printed documents or print preview.
- speech: For screen readers.
- all: For all media types (default).
media-features: Rules or conditions that test for specific characteristics of the device or viewport. They are enclosed in parentheses (). Common media features include:
- width: Width of the viewport. You can use min-width (minimum width) and max-width (maximum width).
- height: Height of the viewport. You can use min-height and max-height.
- orientation: Orientation of the viewport (portrait or landscape).
- resolution: Pixel density of the screen. You can use min-resolution and max-resolution (e.g., min-resolution: 192dpi).
- aspect-ratio: Ratio of the viewport width to its height (e.g., aspect-ratio: 16/9).
- color: Number of bits per color component.
- monochrome: Type of screen (0 for color, 1 for monochrome).
Logical Operators: You can combine multiple media features using:
- and: Both (or all) conditions must be true.
- or (comma ,): At least one of the conditions must be true.
- not: Negates the media query (apply styles only when the condition is false).
Common Breakpoints (Examples – these can vary based on your design):
Extra small screens (phones, less than 600px):
@media (max-width: 599px) { /* Styles here */ }Small screens (phones, 600px and up):
@media (min-width: 600px) and (max-width: 767px) { /* Styles here */ }Medium screens (tablets, 768px and up):
@media (min-width: 768px) and (max-width: 991px) { /* Styles here */ }Large screens (desktops, 992px and up):
@media (min-width: 992px) and (max-width: 1199px) { /* Styles here */ }Extra large screens (large desktops, 1200px and up):
@media (min-width: 1200px) { /* Styles here */ }Example:
/* Default styles for larger screens */
body {
font-size: 18px;
}
.container {
display: flex;
}
.sidebar {
width: 30%;
}
.main-content {
width: 70%;
}
/* Styles for screens smaller than 768px (tablets and phones) */
@media screen and (max-width: 768px) {
body {
font-size: 16px;
}
.container {
flex-direction: column; /* Stack elements vertically */
}
.sidebar {
width: 100%;
margin-bottom: 20px;
}
.main-content {
width: 100%;
}
}
/* Styles for even smaller screens (phones) */
@media screen and (max-width: 480px) {
body {
font-size: 14px;
}
}