当与vw单元一起用于WCAG（辅助功能）时，如何放大wesite font-size？

问题描述

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

I'm writing some css style sheets for my website and having a mass use of "vw" and "vh" css units.I noticed that when I'm trying to enlarge (resize?) the font size with the browser magnifier or using Ctrl+Scrolling up with mouse, the font size doesn't incrase and stays static.I have to make this website accessible (AA Level) and one of the main requirements are

从。

使用rem或em调整大小，但是当我调整窗口大小时，它们没有拉伸的效果，这是使用大众单位时最大的冒险。

Using "rem" or "em" do resize, but they don't have the effect of "stretched" when i resize the window which is the biggest adventage when using "vw" units.

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

How can i solve this? How can I gain both things? Making text resize and keep the aspect ratio of the text for the screen?

谢谢。

推荐答案

vh 和 vw 单位不适用于 font-size 如果你想与WCAG兼容。

vh and vw units are not intended to be used for font-size if you want to be compatible with WCAG.

如果你想要有预期的行为，唯一可能的解决方案就是使用javascript。

The only possible solution if you want to have the expected behavior is to make use of javascript.

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

EDIT : Sample solution with 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>

这篇关于当与vw单元一起用于WCAG（辅助功能）时，如何放大wesite font-size？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！