Question

我最近从使用像素值切换为使用rem来调整网站上对象的大小。我以前的格式是这样的：

.some-class{
  @media (max-width: $split-dimension) {
    width:10px;
  }
  @media (min-width: $split-dimension) {
    width:15px;
  }
}

我试图通过在scss文件中设置基本rem来使用rem动态缩放对象。我设置了一个要分割的尺寸-基本上告诉它，如果窗口大于设置的大小，则显示一个尺寸的站点，如果窗口较小，则显示另一个尺寸的站点。这是代码：

$split-dimension: 1800px;

:root {
  @media (max-width: $split-dimension) {
    font-size: 41.666%;
  }
  @media (min-width: $split-dimension) {
    font-size: 62.5%;
  }
  body {
    font-size: 1.6rem;
  }
}

.some-class{
  width: 1.5rem;
}

在进行切换之前，我注意到在Macbooks上，即使在高分辨率屏幕上（即使我在2018年Macbook上进行了测试），它也会显示该网站的较小比例版本，但它仍然与较大的版本相同-缩放版本在Windows机器上执行（我检查了对象，发现它们在Macbook上使用较小的像素值，在Window上使用预期的像素值）。更改较小分割尺寸的css会影响全屏Macbook页面，但不会影响全屏Windows页面。

由于更改为设置rem并为这两种尺寸使用一个rem值，因此它在Windows上可以正常使用，但是现在它在Macbook上显示了正确尺寸的对象，但该网站看上去已经放大了（宽度为1900px的物体将远远超出即使窗口大于1920像素，浏览器窗口的边框）。

似乎可以正确检测到Macbook浏览器窗口现在大于拆分尺寸，但是由于某些原因，对象仍在按比例放大。我已经在多台Macbook上进行了尝试，但它们都存在相同的问题。

我找不到任何可以解释Macbooks缩放问题的信息。有什么办法可以解决这个问题？

Answer 1

我发现通过更改

:root {
  @media (max-width: $split-dimension) {
    font-size: 41.666%;
  }
  @media (min-width: $split-dimension) {
    font-size: 62.5%;
  }
  body {
    font-size: 1.6rem;
  }
}

到

:root {
  @media (max-width: $split-dimension) {
    font-size: 6.66px;
  }
  @media (min-width: $split-dimension) {
    font-size: 10px;
  }
  body {
    font-size: 1.6rem;
  }
}

我得到了预期的结果。

如何使Macbook正确调整网站上对象的大小？

1 个答案: