html - 在需要时缩小文本以适应 CSS 中的 div

标签 html css

<分区>

所以我遇到了一些问题。我的标题看起来像这样:Header 它在移动设备上看起来真的很差,如下所示: Mobile header

是否有根据需要缩小文本以适应标题的好方法?最好是仅 CSS 的解决方案。

我这里有一个预制的 JSFiddle,其中只有用于试验的 header :https://jsfiddle.net/wgy1ohc3/1/

<div class="parallax-container header-parallax">
  <div class="container container-wide readable-text">
    <h1 class="white-text">Account Security</h1>
    <h4 class="white-text">Control active sessions and 2-Factor Authentication.</h4>
  </div>
  <div class="parallax"><img src="https://i.imgur.com/k45V80z.jpg?2"></div>
</div>

如有任何帮助,我们将不胜感激!

最佳答案

vwvh CSS 测量

对于流畅的响应式文本大小调整,我们可以使用 vw(查看器宽度)和 vh(查看器高度)CSS 测量值。

它们是 widely supportedvery useful .

添加:

h1 {
    font-size: 10vw;
}
h4 {
    font-size: 4vw;
}

你的 fiddle 会给你一个接近我相信你正在寻找的结果。

关于html - 在需要时缩小文本以适应 CSS 中的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44579655/

相关文章:

html - 如何在响应式设计中显示全尺寸窗口后的菜单

html - 如何在div上垂直居中放置链接按钮?

html - 从 HTML 表格中移除边框

html - Bulma - 列大小为一半仍适用于具有 is-desktop 类的平板电脑模式

python - 无法使用 ../返回文件树

CSS3 ch unit 在 IE9+ 和其他浏览器之间不一致

javascript - 如何使用 jQuery 检测 div 没有子类

javascript - 单选按钮隐藏和显示表单内容

html - 是否有可能让 translate3d 在 Android 浏览器中顺利运行?

html - 当你在侧面有导航栏时如何使元素居中?