Question

使用基本结构，如：

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

使用bootstrap作为默认css并添加了css：

h1 { 5vw; }

现在在手机上这是一个完美的尺寸，在桌面上它太大了。将其更改为1.5vw非常适合桌面，但在移动设备上却太小了。这样做的诀窍就像我在示例中看到的那样？

注意，父级的样式在bootstrap中的col-md-6上默认为50％。

Answer 1

1 vw单位等于视口宽度的1％，因此如果您将其设置为5vw，则基本上将其设置为视口总宽度的5％，因此5桌面宽度的百分比将大于移动宽度的5％。

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

CSS Tricks为常用的媒体查询提供了很好的资源：Media Queries for Standard Devices

Answer 2

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