How to adjust CSS for specific zoom level ?


In this article, we will learn How to Adjust specific zoom level in CSS. Adjust specific zoom level in the website using CSS, we need CSS zoom properties with animation and @media rules.

What is the zoom level in CSS?

The "zoom" level refers to the level of magnification applied to a webpage in the css. It is alike to the "zoom" feature in a web browser, which allows to increase or decrease the size of the text and other elements on a webpage.

To adjust the layout and design of a webpage based on the level of magnification applied to it, we can use the @media rule in CSS.

Adjust specific zoom level in CSS

When it comes to web design, it's important to make sure that website looks great on any device or screen size. One way to do this is by adjusting the CSS styles based on the current zoom level of a webpage. This allows you to make sure that the website looks great no matter how much a user zooms in or out.

We use the min-zoom and max-zoom features to adjust CSS styles for a specific zoom level. These features allow setting the range of zoom levels that the CSS should be applied to.

For example, you can use the following code to apply a specific CSS style when the zoom level is between 110% and 130% −

@media screen and (min-zoom: 110%) and (max-zoom: 130%) {
   /* your CSS styles here */
}

Another way to adjust CSS styles for a specific zoom level is use to the @media rule in CSS. This rule allows to apply styles based on the conditions of the media, such as the screen size or zoom level.

For example, to apply a specific CSS style when the zoom level is set to 200%, you can use the following code −

@media screen and (zoom: 200%) {
   /* your CSS styles here */
}

This means that the style will be applied only when the zoom level is exactly 200%.

It is worth noting that the zoom property is not a standard CSS property, and is not supported by all browsers. As well, it does not affect layout, it just modifies the visual presentation of the elements.

When adjusting CSS styles for specific zoom levels, it's important to consider the user experience. For example, you may want to adjust the font size or spacing of elements when a user zooms in, to make sure that the text is still legible. As well, you may want to adjust the position or size of elements when a user zooms out, to make sure that the website still looks great on a smaller screen.

Example

<html>
<head>
   <style>
      body {
         height: 100vh;
         background-color: #FBAB7E;
         text-align: center;
      }
      .zoom-in-out-box {
         margin: 24px;
         width: 50px;
         height: 50px;
         background: #f50;
         animation: zoom-in-zoom-out 2s ease infinite;
      }
      @keyframes zoom-in-zoom-out { 
         0% {
            transform: scale(1, 1);
         }
         50% {
            transform: scale(1.5, 1.5);
         }
         100% {
            transform: scale(1, 1);
         }
      }
   </style>
</head>
<body>
   <h3>Zoom-in Zoom-out Demo</h3>
   <div class="zoom-in-out-box"></div>
</body>
</html>

Example

<html>
<head>
   <title>TutorialsPoint</title> 
   <style>
      body{
         text-align:center;
      }
      .div1{
         margin: auto;
         background: #6ff;
         padding: 20px;
         width: 50px;
         height: 50px;
      }
   </style>
</head>
<body>
   <h2>Adjust CSS for specific zoom level</h2>
   <div class="div1" id="zoom"></div>
   <hr>
   <button onclick="zoom.style.zoom='100%'">Normal</button>
   <button onclick="zoom.style.zoom='80%'">ZoomOut</button>
   <button onclick="zoom.style.zoom='140%'">ZoomIn</button>
</body>
</html>

Conclusion

Adjusting CSS styles for specific zoom levels can help ensure that a website looks great on any device or screen size. By using the @media rule and the min-zoom and max-zoom features, you can apply CSS styles based on the current zoom level of a webpage. Additionally, it's important to consider the user experience when adjusting your CSS styles for specific zoom levels.

Updated on: 09-Mar-2023

8K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements