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
Adjust CSS for Specific Zoom Level
To adjust CSS for specific zoom level, we will be using CSS media queries which changes the div box style for different zoom levels. In this article, we will be discussing step wise process for using media queries to adjust CSS for specific zoom level.
In this article, we are having a div box with initial green background and our task is to adjust CSS for specific zoom level.
Steps to Adjust CSS for Specific Zoom Level
We will be following below mentioned steps to adjust CSS for specific zoom level.
- We have used div tag with container class to create a box which is initially green in color.
- We have set the appearance and dimension of the box using CSS background-color and width, set the padding, margin to place the box at the center, font-size, text color and alignment of the text using CSS text-align property.
- We have used media queries to set the style for zoom out condition using min-width property. It changes the color from green to deep blue while zooming out(when browser width is > 1300px) in the browser i.e when zoom percentage is less than 100%.
- We have used media queries to set the style for zoom in condition using max-width property. It changes the color from green to maroon while zooming in(when browser width is < 800px) in the browser i.e when zoom percentage is greater than 150%.
Example
Here is a complete example code implementing above mentioned steps to adjust CSS for specific zoom level using media queries.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
background-color: #04af2f;
width: 50%;
margin: 20px auto;
padding: 20px;
text-align: center;
color: white;
font-size: 1.6em;
}
@media screen and (min-width: 1300px) {
.container {
background-color: #031926;
font-size: 1.5em;
}
}
@media screen and (max-width: 800px) {
.container {
background-color: rgb(112, 10, 36);
font-size: 1.2em;
}
}
</style>
</head>
<body>
<h3>
To Adjust CSS for Specific Zoom Level
</h3>
<p>
Run this code in your own browser and
try changing zoom percentage from your
browser settings.
</p>
<div class="container">
This box changes color based on zoom level.
</div>
</body>
</html>
Output
Conclusion
In this article, we discussed how to adjust CSS for specific zoom level. we have used media queries to change box style based on screen width which changes background color of the box while zooming in and zooming out.
12K+ Views
