当与vw单元一起用于WCAG（辅助功能）时，如何放大wesite font-size？ [英] How can i enlarge wesite font-size when used with vw unit for WCAG (accessibility) propeses?

问题描述

我正在为我的网站写一些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

确保您的网站响应良好增加文字大小（1.4）

Ensure Your Site Responds Well to Increased Text-Size (1.4)

从这里。

使用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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！