Css 在webkit中，元素大小调整的REM在字体大小50%以下不起作用
我已经开始使用REMs来调整页面上某些元素的大小，这样我就可以通过修改对媒体查询有用的根html元素的字体大小来轻松地调整它们的大小。然而，我注意到桌面webkit浏览器中的一个问题，即元素将调整大小以匹配50%以上的任何字体大小，而不是下面的任何字体大小 展示使用REMs调整元件尺寸的技术。我还包括了下面的示例代码 HTML: 您可以看到该框，该框设置为10rem，字体大小为62.5%，渲染为100px正方形。当您通过媒体查询放大基本字体大小时，框会按预期变大。长方体也会缩小到字体大小的50%，但任何低于该值的值，长方体都不会小于50%。不过，文本大小继续缩小 Firefox继续将未测试IE的框缩小到50%以下，因此这可能是webkit唯一的问题 -webkit文本大小调整：无适用于移动webkit，但对桌面版本没有任何影响 当其他人遇到这个问题，并设计出解决方案时Css 在webkit中，元素大小调整的REM在字体大小50%以下不起作用,css,webkit,font-size,em,Css,Webkit,Font Size,Em,我已经开始使用REMs来调整页面上某些元素的大小，这样我就可以通过修改对媒体查询有用的根html元素的字体大小来轻松地调整它们的大小。然而，我注意到桌面webkit浏览器中的一个问题，即元素将调整大小以匹配50%以上的任何字体大小，而不是下面的任何字体大小 展示使用REMs调整元件尺寸的技术。我还包括了下面的示例代码 HTML: 您可以看到该框，该框设置为10rem，字体大小为62.5%，渲染为100px正方形。当您通过媒体查询放大基本字体大小时，框会按预期变大。长方体也会缩小到字体大小的50%
提前感谢。包括演示您正在谈论的内容的代码，仅此而已。jsbin链接是一个不错的额外链接，但还不够。在本例中，有很多代码似乎与问题无关。@JukkaK.Korpela感谢您的回答。我已经将jsbin链接更新为一个新的链接，其中只包含了演示错误所需的内容，并且还编辑了我的原始帖子，将代码内联。这似乎取决于最小字体大小，而不是rem单元的使用。Chrome不允许用户将最小字体大小设置为小于6px，这是相当合理的，因为文本很难以较小的大小阅读。我想是这样，但文本的大小继续减小到50%以下。为了解决这个问题，我最终将基本字体大小设置为625%，然后将所有rem值设置为原来的十分之一。不太理想，但它可以胜任。
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="block"></div>
<p>Sample Text</p>
</body>
</html>
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%}}