时间戳

首页 > 解决方案 > 当整个页面在 HTML 中放大时如何恢复特殊部分的缩放

html - 当整个页面在 HTML 中放大时如何恢复特殊部分的缩放

问题描述

这是我的 HTML 页面：

<body>
  ....
  <div class="no-zoom">
    ....
  </div>
</body>

body我为标签设置了缩放选项。

我想在no-zoom课堂的某些部分将缩放设置为 1。

所以我做了CSS如下：

CSS：

body {
  zoom: 1.5;
}

.no-zoom {
  zoom: 1; // it's not working.
}

但它不起作用。请任何人帮助。

标签： htmlcss

解决方案

缩放有点像em测量，1您的子缩放基本上是说缩放与父缩放相同。作为另一个示例，子缩放1.25将比父缩放多 25%。

您可以使用的一种选择是缩放 的直接子级body，不包括no-zoom

body > :not(.no-zoom) {
  zoom: 1.5;
  color:red; /*Just to highlite :not*/
}
<div>Zoomed</div>
<div class="no-zoom">No Zoom For You!</div>

推荐阅读