javascript - 如何使网站自动放大？灵活适用于任何分辨率

Question

有什么方法可以使网站大小灵活适应任何（或多个）分辨率，但每个元素都放大（比如缩放效果）？那么在更大的分辨率下，图像、按钮和输入会和文本一样大吗？甚至可能吗？

Answer 1

您需要为每个分辨率制作单独的 CSS，或者您可以尝试 jQuery 技术！

为了以正确的分辨率运行正确的 CSS，您需要为此使用媒体查询。

对于 jQuery，看看这个检查浏览器缩放的问题。

像这样使用媒体查询：

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- for screen of width 800px -->

Answer 2

使用媒体查询...一个使用字体大小的简单示例：

@media (min-width:400px) {
   p {
     font-size: 10px;
     }
  }
@media (min-width:800px) {
  P {
    font-size: 12px;
    }
  }

该示例仅适用于 p 元素，但可以应用于具有 size 属性的任何内容。