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

Question

我在这里阅读有关缩放的信息

Zoom website depending on monitor resolution?

似乎没有任何作用

我想测试浏览器的宽度/浏览器的视口，然后，如果它是一个很大的数字，我想自动将网页放大到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>

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