文本自动调整大小，没有媒体查询（响应设计） [英] text automatically resizes without media queries (responsive design)

问题描述

有没有办法让文字自动调整大小，取决于浏览器或屏幕或文本的容器？ （不依赖于设备，因为这不是一个好的做法）。

没有CSS 3媒体查询的帮助！不要使用媒体查询是很棒的，因为代码会更少，通常你必须使用后备为旧的浏览器来理解媒体查询。

我知道有一个设置相对尺寸的方式，但自动调整大小的尺寸如何？我尝试了 font-size：auto; 和 font-size：120％，但如果我伸展我的浏览器窗口提前感谢

解决方案

（1）您可以使用vw和vh调整相对于视口的大小：

  1vw =视口宽度的1％
 1vh =视口高度的1％
 1vmin = 1vw或1vh，取较小者
 1vmax = 1vw或1vh，取大者
  

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

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

Is there a way to have a text automatically resized , depending on browser or screen or text's container? (not depending on device, because is not a good practice).

And without the help of CSS 3 media queries! It would be awesome not to use media queries because the code will be less and usally you have to use fallbacking for older browsers to understand media queries.

I know there is a way for setting a relative size, but how about a size that will auto-resize? I tried font-size:auto; and font-size:120% but if I stretch down my browser's window the size is the same

Thanks in advance

解决方案

(1) You can use vw and vh which resize relatively to the 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) You can use JavaScript: e.g: http://fittextjs.com/

这篇关于文本自动调整大小，没有媒体查询（响应设计）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！