Question

我无法弄清楚如何在调整大小时使文本像图像一样。当我调整浏览器文本大小时，保持与开头一样大，并开始在多行中断。我尝试使用VW字体大小进行试验，但在这种情况下，大屏幕上的文字太大而小屏幕上的文字太小。

有我的CSS课程：

.text_head_container{
  font-size: 35px;
  font-size: 2.1875rem;
  color: white;
  width:60%;
  display:inline-block;

}    
.img_head_container{
  display:inline-block;
  width:15%;
  height:auto;
}

我会感谢任何帮助。

问候。

Answer 1

我怀疑媒体查询是唯一合理的选择：

p {
  font-size: 5vw;
}

@media screen and (max-width: 600px) {
  p {
    font-size: 30px;
  }
}

Answer 2

你说你已经尝试过vw。你这样试过吗？ Responsive Text 我在文本上设置了vmin和vmax，这样它就不会低于你设置的最小vw，也不会超过最大高度，它仍然完全响应。

＆＃13;

.resize{
  font-size: 35px;
  font-size: 6vmax;
  font-size; 1vmin;
  width:60%;
  display:inline-block;

}    
.text{
  display:inline-block;
  width:100%;
  height:auto;
}

＆＃13;

<div class="resize">
  <p class="text"> Just some random text, Just some random text,  Just some random text, Just some random text,  Just some random text, Just some random text, Just some random text, Just some random text, </p>
</div>

＆＃13;

Answer 3

CSS无法轻松提供您需要的设施，以使字体大小与浏览器的大小非线性地缩放。 buildscript { repositories { jcenter() } dependencies { classpath 'com.bmuschko:gradle-tomcat-plugin:2.2.5' } } apply plugin: 'java' apply plugin: 'war' apply plugin: 'com.bmuschko.tomcat' sourceCompatibility = 1.8 repositories { mavenCentral() } dependencies { def tomcatVersion = '7.0.59' tomcat "org.apache.tomcat.embed:tomcat-embed-core:${tomcatVersion}", "org.apache.tomcat.embed:tomcat-embed-logging-juli:${tomcatVersion}", "org.apache.tomcat.embed:tomcat-embed-jasper:${tomcatVersion}" } dependencies {Other dependencies}是你最接近的，如果你觉得它在大屏幕上太大而在小屏幕上太小，你将不得不做一些提升。 / p>

我建议你做的是首先弄清楚每个800px从600px到2k的正确尺寸，然后再在3k和4k，并找到适合你构建的曲线的函数。像“800px我想要26px，1000px我想要29px”等等，应该就是你所需要的。然后任何随机curve fit之作都应该能够为您提供相关功能。

一旦你拥有了这个功能，你基本上就有两个选择。

使用vw实现您的曲线（并非总是可行，并且丢失了大量浏览器后备）
使用小步骤制作一个巨大的媒体查询列表，并在它们之间定义字体（可生成，但是......）
监听文件调整大小事件，然后重新分配字体大小（直接或通过覆盖一些CSS-DOM规则，后者是大多数插件用于此操作）

这是simple implementation of listening for the document resize event。

CSS如何使文本像图像一样缩放

3 个答案: