使用vw的字体缩放在移动设备上正确，但在桌面上太大？

问题描述：

<div class="col-md-6"> 
    <h1>Some Text</h1> 
</div>

自举作为默认的CSS，并添加CSS：

h1 { 5vw; }

现在在移动，这是一个完美的大小，在桌面上是太大了。将其更改为1.5vw对于桌面电脑来说是完美的，但对于移动设备而言太小了。这里有什么窍门可以像我在这个例子中看到的那样大小？

请注意，父引导的样式默认为引导程序中col-md-6的50％。

媒体查询......你已经有了他们进入Bootstrap..use他们。 ;） –

为什么我会想要使用媒体查询时，这应该有助于避免使用媒体查询为每个单一的元素呢？ vw的要点是无论视口的大小如何，都可以平滑过渡。一拉la https://css-tricks.com/viewport-sized-typography/ –

答

1 VW单位等于视口宽度的1％，因此，如果你有它设置为5VW，你基本上将其设置为5％，视口的总宽度，所以你的桌面宽度的5％将会大于你的移动宽度的5％。

您需要使用媒体查询来定位您的特定中断点并相应地调整您的vw单位。

CSS技巧有经常使用的媒体查询这里巨大的资源：Media Queries for Standard Devices

根据CSS技巧（如你所说），这应该是一种避免媒体查询这种事情的方式。如果您根据断点设置字体大小，它会破坏可流动字体大小的目的。正如你可以在他们的文章中看到的那样：https：//css-tricks.com/viewport-sized-typography/ –

在那篇文章中还有一个gif，它展示了字体大小变化的方式，通过增加视口增加。所以是的，如果您希望字体大小随着视口的大小而增加，则不需要媒体查询，但我的理解是，您希望在较大的视口上使用较小的字体大小？在这种情况下，据我所知，您需要媒体查询。 – GKB

好的。我想我正在解释那篇文章中的其他内容。我认为这个例子是在较小的视口中，所以它看起来就是这样。他说这种方式摆脱了媒体在这方面的疑问，我觉得有点不合时宜。基本上，此解决方案适用于移动设备，但适用于根本不起作用的标准桌面尺寸。 –

答

查看此页面并查看响应式实用程序类。我相信你可以制作两个标题，并根据设备的大小显示一个隐藏和一个显示。