Media Types in CSS
There are many types of media types which are listed below:
Media Type | Description |
---|---|
all | It is used for all media devices. |
print | It is used for printers. |
screen | Used for computer screens, smartphones, etc. |
speech | Used for screen readers that read the screen aloud. |
Syntax:
@media not | only mediatype and (expression) {
// Code content
}
@media screen and (min-width: 720px) {
body {
background-color: crimson;
}
}
@media screen and (min-width: 720px) {
#rightsidebar {width: 300px; float: right; height: 150px}
#main {margin-right: 200px;}
}
This code snippet ensures that a menu will float to the left side of the page when the viewport is 720 pixels wide or wider. If the viewport is less than 720 pixels, the menu will be positioned on top of the content.
Example: This example demonstrates the implementation of the CSS media queries with the different device width for making it responsive.
<!DOCTYPE html>
<html>
<head>
<title>CSS media query</title>
<style>
body {
text-align: center;
}
.gfg {
font-size: 40px;
font-weight: bold;
color: green;
}
@media screen and (max-width:800px) {
body {
text-align: center;
background-color: green;
}
.gfg {
font-size: 30px;
font-weight: bold;
color: white;
}
.geeks {
color: white;
}
}
@media screen and (max-width:500px) {
body {
text-align: center;
background-color: blue;
}
}
</style>
</head>
<body>
<div class="gfg">
w3wiki
</div>
<div class="geeks">
A computer science portal for geeks
</div>
</body>
</html>
Output: The output shows the color change with respect to the defined screen width.
CSS Media Queries
CSS Media Queries is a powerful tool that allows developers to create responsive web designs. They enable the styling of elements to adapt based on the characteristics of the device displaying the webpage.
Media queries are a feature of CSS that apply specific styles based on the characteristics of the user’s device or viewport. These characteristics can include screen width, height, orientation, resolution, and more. The result of a media query is either true or false, and if true, the specified style sheet is applied.
The breakpoints in @media specify for what device-width size, the content is just starting to break or deform. The CSS2 rule introduced different style rules for different media types.
Media queries can be used to check many things:
- Width and Height of the Viewport
- Width and Height of the Device
- Orientation
- Resolution
Contact Us