Question

我正在为我的网站写一些CSS样式表并大量使用＆＃34; vw＆＃34;和＆＃34; vh＆＃34; css单位。我注意到，当我尝试使用浏览器放大镜放大（调整大小？）字体大小或使用Ctrl +向上滚动鼠标时，字体大小不会变为静止。我必须使这个网站可访问（AA级），其中一个主要要求是

确保您的网站能够更好地响应增加的文字大小（1.4）

从here获得。

使用＆＃34; rem＆＃34;或＆＃34; em＆＃34;做大小调整，但他们没有“拉伸＆＃34;当我调整窗口大小时，这是使用＆＃34; vw＆＃34;时最大的冒险。单元。

我该如何解决这个问题？我怎样才能获得这两件事？使文本调整大小并保持屏幕文本的宽高比？

感谢。

Answer 1

如果您想与WCAG兼容，则

vh和vw单位不能用于font-size。

如果您希望获得预期的行为，唯一可行的解决方案是使用javascript。

编辑：使用jQuery的示例解决方案：

$(document).ready(function() {
  $(".vh").each(function() {
    $(this).css("font-size", $(this).css("font-size"));
  });
});

.vh {
   font-size: 50vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vh">Test</div>

Answer 2

使视口单元根据用户字体大小首选项进行缩放非常简单。只需使用calc()将视口单元与相对单元组合。例如：

.example { 
  font-size: calc(1rem + 1.5vw); 
}

这也有额外的好处，即设置1rem（16px）的最小字体大小，这通常不仅仅是辅助功能。

还有其他控制比例的方法，但这超出了这个问题的范围。只需谷歌'流体排版'，你应该找到我正在谈论的技术。