Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Use Media Queries for Common Device Breakpoints with CSS
Media Queries are used on a web page to set the responsiveness. It allows a user to set different styles based on different screen sizes. These screen sizes are mainly desktop, tablet, and mobile devices. Let us first set the different screen sizes i.e., where we will set the common device breakpoints.
Different screen sizes
The common device breakpoints are the different devices with its screen size i.e.
Phones − Screens less than 768px wide
Tablets − Screens equal to or greater than 768px wide
Small laptops − Screens equal to or greater than 992px wide
Laptops and Desktops − Screens equal to or greater than 1200px wide
Screen Size with Maximum Width 600px
When the screen size is less than 600px, the following background color is set using the background-color property −
@media only screen and (max-width: 600px) {
body {
background: blue;
}
}
Screen Size with Minimum Width 600px
When the screen size is more than 600px but less than 768px, the following background color is set using the background-color property −
@media only screen and (min-width: 600px) {
body {
background: green;
}
}
Screen Size with Minimum Width 768px
When the screen size is more than 768px but less than 992px, the following background color is set using the background-color property −
@media only screen and (min-width: 768px) {
body {
background: orange;
}
}
Screen Size with Maximum Width 992px
When the screen size is more than 992px but less than 1200px, the following background color is set using the background-color property −
@media only screen and (min-width: 992px) {
body {
background: red;
}
}
Screen Size with Maximum Width 1200px
When the screen size is more than 1200px, the following background color is set using the background-color property −
@media only screen and (min-width: 1200px) {
body {
background: cyan;
}
}
Example
To use media queries for common device breakpoints using CSS, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: white;
}
@media only screen and (max-width: 600px) {
body {
background: blue;
}
}
@media only screen and (min-width: 600px) {
body {
background: green;
}
}
@media only screen and (min-width: 768px) {
body {
background: orange;
}
}
@media only screen and (min-width: 992px) {
body {
background: red;
}
}
@media only screen and (min-width: 1200px) {
body {
background: cyan;
}
}
</style>
</head>
<body>
<h1>Typical Breakpoints Example</h1>
<h2>Resize the screen to see background color change on different breakpoints</h2>
</body>
</html>
125 Views
