缩放取决于浏览器分辨率/浏览器屏幕尺寸

Question

我在这里阅读有关变焦

根据显示器分辨率缩放网站？

似乎没有用

我要测试浏览器宽度/浏览器查看端口，然后，如果数值很大，我想自动将网页缩放为110％

跨浏览器兼容。

怎么做？

Answer 1

使用响应式设计实现此目标的更好方法。 计算rem单位中的每个元素，以便在更改根元素时的字体大小； 通过期望的媒体需求，您的所有元素在屏幕上看起来的大小都会变大。

即：假设您有一个div和h1元素，并且想要在不同的屏幕上显示更大/更小，则应遵循以下代码：

<div>
  <h1>Hello</h1>
</div>

<style>
div{
   height: 25rem;
   border:1px solid red;
  }
h1{
   font-size: 4rem;
  }
@media screen and (min-width: 600px) {
  html{
   font-size: 16px;
  }
}
@media screen and (min-width: 1200px) {
      html{
       font-size: 20px;
      }
    }


  </style>

因此，在上面的代码中，随着您根据媒体查询断点更改html标签上的字体大小， div和h1标签应该变大或变小。