Question

我已经开始使用REM来调整页面上某些元素的大小，这样我就可以通过修改root html元素上的font-size（对媒体查询很有用）轻松调整其大小。但是，我注意到桌面webkit浏览器中的一个问题，其中元素将调整大小以匹配任何超过50％的字体大小，但下面不再进一步。

You can see an example of it happening on this page展示了使用REM调整元素大小的技巧。我还包括下面的示例代码。

HTML：

<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body>
    <div class="block"></div> 
    <p>Sample Text</p>
</body>
</html>

CSS：

html {font-size: 62.5%}
p {font-size: 2rem;}
.block {background: yellow; width: 10em; height: 10em;}

@media (min-width: 600px) {html {font-size: 70%}}
@media (min-width: 700px) {html {font-size: 80%}}
@media (max-width: 400px) {html {font-size: 50%}}
@media (max-width: 300px) {html {font-size: 40%}}
@media (max-width: 200px) {html {font-size: 30%}}

您可以看到框，设置为10rem，字体大小：62.5％，渲染为100px square。随着您扩展基本字体大小（通过媒体查询），该框会按预期变大。该框也缩小到字体大小50％，但任何低于该值的框，该框永远不会小于50％。（但文字大小继续按比例缩小）。

Firefox继续将该框缩小至50％以下（未经过IE测试），因此这可能只是一个webkit问题。

-webkit-text-size-adjust：none适用于移动webkit，但对桌面版本没有任何影响。

正如其他人遇到过这个问题，并设计了解决方案吗？

提前致谢。

在webkit中，元素大小调整的REM不能低于字体大小50％

0 个答案: