css - 文本自动调整大小，无需媒体查询(响应式设计)

Question

有没有办法根据浏览器、屏幕或文本容器自动调整文本大小？ (不依赖于设备，因为这不是一个好的做法)。

并且无需 CSS 3 媒体查询的帮助!不使用媒体查询会很棒，因为代码会更少，而且通常您必须使用较旧的浏览器的回退来理解媒体查询。

我知道有一种方法可以设置 relative size ，但是自动调整大小的大小怎么样？我尝试了 font-size:auto; 和 font-size:120% 但如果我向下拉伸(stretch)浏览器窗口，大小是相同的。

Answer 1

1. 您可以使用 vw 和 vh 来相对于视口(viewport)调整大小:

   1vw = 1% of viewport width
   1vh = 1% of viewport height
   1vmin = 1vw or 1vh, whichever is smaller
   1vmax = 1vw or 1vh, whichever is larger
   

   http://css-tricks.com/viewport-sized-typography/

2. 您可以使用 JavaScript: 例如:http://fittextjs.com/