CSS (Cascading Style Sheets) is a fundamental technology used for styling web pages. It allows developers to control the visual appearance and layout of HTML elements. One powerful feature of CSS is media queries, which enable developers to apply different styles based on various device characteristics such as screen size, resolution, and orientation.
Media queries allow websites to be responsive, adapting their layout and design to provide an optimal user experience across different devices. By utilizing media queries, developers can create websites that look great on desktops, laptops, tablets, and smartphones. Let’s dive into media queries and explore how they work with some examples.
Media queries are written as conditional statements that target specific device characteristics. They consist of a media type and one or more expressions, known as media features. Here’s an example of a media query:
“`css
@media screen and (max-width: 768px) {
/* Styles applied when the screen width is 768 pixels or less */
body {
font-size: 16px;
}
}
“`
In this example, the media type is “screen,” which targets devices with screens. The media feature used is “max-width,” which specifies the maximum width of the device’s screen. The styles within the curly braces will be applied when the screen width is 768 pixels or less.
Media queries can also be combined using logical operators like “and” and “or” to create more complex conditions. For instance:
“`css
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* Styles applied when the screen width is between 768 and 1024 pixels */
.container {
width: 80%;
}
}
“`
In this example, the styles will be applied when the screen width is between 768 and 1024 pixels. The “min-width” and “max-width” media features define the range of screen widths for which the styles will be active.
Media queries are not limited to screen width; they can target other characteristics such as screen height, resolution, orientation, and even the type of device. Here’s an example that targets devices with high-resolution screens:
“`css
@media screen and (min-resolution: 300dpi) {
/* Styles applied when the screen resolution is 300 dots per inch or higher */
img {
width: 100%;
}
}
“`
In this example, the styles within the media query will be applied when the screen resolution is 300 dots per inch (dpi) or higher. This allows developers to provide high-resolution images for devices with capable screens.
Media queries can also be used to adjust styles based on the device’s orientation. For example:
“`css
@media screen and (orientation: landscape) {
/* Styles applied when the device is in landscape orientation */
.header {
height: 80px;
}
}
“`
In this example, the styles within the media query will be applied when the device is in landscape orientation. This enables developers to customize the layout based on the device’s orientation, ensuring a seamless user experience.
By utilizing media queries, developers can create responsive designs that adapt to different devices and screen sizes. This flexibility allows websites to provide an optimal viewing experience, whether on a large desktop monitor or a small smartphone screen.
In conclusion, CSS media queries are a powerful tool for creating responsive websites. They allow developers to apply different styles based on device characteristics, such as screen size, resolution, and orientation. By using media queries effectively, developers can ensure that their websites look and function well across a wide range of devices.