CSS setting page zoom

In order to set the page zoom, you can use the following CSS properties:

 

body {
  zoom: 80%; /* 缩放比例 */
}

Or use the following CSS properties:

 

body {
  transform: scale(0.8); /* 缩放比例 */
  transform-origin: 0 0; /* 缩放的原点 */
}

Please note that scaling may affect page layout. Therefore, this feature should be used with caution.

To set different scaling for specific devices, such as mobile devices, you can use media queries. For example:

 

@media only screen and (max-width: 480px) {
  body {
    zoom: 60%;
  }
}

This means that when the screen width does not exceed 480px, the page will scale at 60%.

Note that in some cases using scaling may not be the best option. For example, if you want your pages to be designed in a responsive manner, you should consider using fluid layouts and media queries instead of scaling.

In addition to scaling, you can use CSS layout and media queries to adjust page styles to fit different screen sizes. For example, you can use @mediarules to adjust page font size, change line height, resize images, etc.

Guess you like

Origin blog.csdn.net/lwf3115841/article/details/128827372