Introduction to CSS Media Queries
CSS Media Queries
CSS Media Queries are used to apply different CSS styles based on the characteristics of the device or browser being used to view a web page. Media queries allow developers to create responsive designs that adjust to the user's screen size, orientation, resolution, and other characteristics.
As an example:
@media (min-width: 768px) {
body {
font-size: 20px;
}
}
In this example:
- We are using the
@media
rule to define a media query. - The
min-width:
768px`media feature expression tests whether the width of the device's screen is at least
768px`. - If the condition is true, the styles inside the media query will be applied to the
body
element. - In this case, we are setting the
font-size
of thebody
element to20px
if the screen width is at least768px
. - This would typically be used to create a responsive design that adjusts the font size based on the screen size.
Example
Here is an example that uses CSS media queries to adjust the styles of a web page based on the width of the screen:
Editor
CSS3 Media Types
CSS3 introduces several media types that allow you to define different styles for different devices or media types.
The following are the most commonly used media types in CSS3:
The screen
This is the default media type and applies to devices with a screen such as desktops, laptops, tablets, and smartphones.
As an example:
@media screen {
body {
background-color: #f1f1f1;
}
}
In this example:
- The background color of the
body
element is set to a light gray color when the device has a screen.
The print
This media type applies to printers and print preview modes. You can use it to define styles that are optimized for printing, such as removing backgrounds, adjusting font sizes, and removing unnecessary elements.
As an example:
@media print {
body {
background-color: white;
font-size: 12pt;
}
}
In this example:
- The background color of the
body
element is set to white and the font size is set to12pt
when the page is being printed.
The handheld
This media type applies to handheld devices such as mobile phones and PDAs. You can use it to define styles that are optimized for small screens and touch input.
As an example:
@media handheld {
body {
background-color: #f1f1f1;
font-size: 14px;
}
}
In this example:
- The background color of the
body
element is set to a light gray color and the font size is set to14px
when the device is a handheld device such as a mobile phone.
The all
This media type applies to all devices.
As an example:
@media all {
body {
font-family: Arial, sans-serif;
}
}
In this example:
- The font family of the
body
element is set toArial
or asans-serif
font on all devices.
The speech
This media type applies to speech synthesizers and screen readers. You can use it to define styles that are optimized for these devices, such as removing visual cues and using large fonts.
As an example:
@media speech {
h1 {
display: none;
}
}
In this example:
- The
h1
element is hidden when the device is a speech synthesizer or screen reader.
The tv
This media type applies to televisions and similar devices.
As an example:
@media tv {
body {
background-color: black;
color: white;
}
}
In this example:
- The background color of the
body
element is set toblack
and the text color is set towhite
when the device is a television or similar device.