如何优雅地降级 CSS 视口单位?

2024-03-25

CSS 视口单位 (vw, vh, vmin, vmax)非常棒,我想开始将它们用于字体 - 但我注意到here http://caniuse.com/viewport-units他们没有得到广泛的支持。我尝试在不支持的浏览器中搜索任何用于优雅降级的最佳实践,但找不到任何有用的东西。除了这样做之外,还有其他更好的方法吗:

    h1 {
      font-size: 120%;    /* for unsupported browsers */
      font-size: 5.3vmin; /* for supported browsers */
    }

提前致谢!


  • 原生用法

您至少需要提供后备:

h1 {
  font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
  font-size: 5.4vw;  
}

还讲述了如何模仿 FitText.js 的功能。

欲了解更多信息,请阅读 Chris Coyier 的“视口大小的版式”http://css-tricks.com/viewport-sized-typography/ http://css-tricks.com/viewport-sized-typography/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何优雅地降级 CSS 视口单位? 的相关文章

随机推荐

  • 如何检查 ElasticSearch 上的重复数据?

    当存储某些文档时 它应该存储不存在的文档并忽略其余文档 这应该在应用程序级别完成 也许检查文档的 id 是否已经存在等 以下是文档中的说明 操作类型 索引操作还接受可用于强制创建操作的 op type 从而允许 如果不存在则放置 行为 使用
  • JSON.parse:对象中的属性值后应有“,”或“}”

    当我通过 AJAX 加载 human json 文件时 我不断收到此错误消息 整个错误消息如下 JSON parse expected or after property value in object at line 2 column 2
  • Linux内核中读写原子操作的实现

    最近 我研究了 Linux 内核的原子读写实现 并提出了一些问题 首先是ia64架构的相关代码 typedef struct int counter atomic t define atomic read v volatile int v
  • 如何将文本更改为文本输入元素 - jQuery

    我的页面中有一张表格 如下所示 table cellpadding 0 cellspacing 0 style width 100 tr td class field1s field1x td td class field2s field2
  • 启用推送状态和上下文路径路由:在服务器上找不到静态资产

    我使用静态构建包将 React 应用程序部署到 Cloud Foundry 目标是使应用程序可以在domain com 下访问path 所以我根据他的博客文章配置了路线 https www cloudfoundry org context
  • 如何使 Sphinx 尊重使用 __init__.py 将类导入到包中

    我有一个包裹 foo foo py bar py init py foo py 有一个 Foo 类 在 init py 中 我导入了 Foo 类 以便用户可以执行以下操作 from foo import Foo Sphinx 正确地将 Fo
  • 数据库/网站状态的 Web 服务

    我目前正在尝试构建 一个更简单的版本 一个类似于的状态网站亚马逊的服务健康仪表板 http status aws amazon com 基本上 我需要连接大约 3 个数据中心和几个网站 并至少带有向上 向下消息 我最熟悉 C 和一些网络编程
  • 在父 div 中间创建一个 div

    我正在努力保持 chat innerdiv 位于中间 chat maindiv 我可以通过使用百分比值来做到这一点 但我的问题是应该有2px百分比值无法提供的间隙 相对于宽度和高度 为了清楚地理解 请参阅 CSS 代码中的注释 JSbin
  • 如何四舍五入到最接近的千?

    如何将数字四舍五入到最接近的千位 function round var Round it PHP 允许负精度round例如 x round x 3 Uses default mode of PHP ROUND HALF UP 而正精度表示在
  • 如何让d3的translate:translate-drag功能更加流畅?

    In 这个 JSFiddle https jsfiddle net sachid 8d6ht3dL 我已经在 svg 中实现了元素 我希望这组元素可以拖动 并且我已经尝试过d3 drag并使用transform translate 拖动并不
  • 在 AKS 集群中安装 nginx ingress 失败并出现 SyncLoadBalancerFailed 错误

    我有一个带有 Web 应用程序的 AKS 集群 我想配置一个 nginx Ingress 控制器以将应用程序公开到互联网 然后启用 TLS 我一直在关注官方文档 https learn microsoft com en us azure a
  • 当我尝试连接 Box.com 的 API 时,rauth2 解码器无法处理 access_token

    这是我用于连接到 Box 的代码 但我无法让 box storage get auth session data data 工作 从 rauth 导入 OAuth2Service box storage OAuth2Service name
  • 如何在 Android 中处理 3 个嵌套回收器视图中的数据 [Kotlin]

    我有一个由三个回收者视图组成的结构 因此 有一个父回收器视图包含一个子回收器视图 而该子回收器视图又包含一个子回收器视图 为了理解 就像第一个回收者视图是楼层总数 第二个回收者视图是房间总数 第三个回收者视图是设备总数 我有一个房间数据库
  • Objective-C 将数字舍入到最接近的 50

    如何将数字四舍五入到最接近的 X 值 例如 50 IE 47 就是 50 24 将是 0 74 就是 50 99 就是 100 etc 我真的不知道从哪里开始研究如何做到这一点 附 我在 iPhone 上使用 cocoa touch 多谢
  • 使用lambdaify将硬积分转换为lambda函数

    我想对函数进行羔羊化Integral t t t 0 x 它有效 但是我的新函数由lambdify 不返回数字 而仅返回sympy integrals integrals Integral班级 但我不希望这样 我希望它返回一个浮点数 这是我
  • Hibernate 不保存值的集合

    好吧 我现在已经在几个项目中使用了 Hibernate 但在使用它之前我并没有了解它的复杂性 我开始查看使用 JPA 注释并与 Spring 集成的代码 一切运行良好 但现在我想向我的学生教授基本的 Hibernate 并且我正在创建一个示
  • 如何摆脱“从预捆绑文件加载”消息?

    在启动屏幕之后 但在加载应用程序之前 屏幕顶部会出现一条 正在从预捆绑文件加载 消息 持续时间只有几百毫秒 我在开发中不介意这一点 但在手机上运行时我仍然看到此消息 这是我创建捆绑包的方法 有任何想法吗 谢谢 react native bu
  • Cardview Click 未打开活动

    我的问题 no error in this project i can run successful 我的按钮可以在特定时间点击 当我点击回来时 它根本不起作用 我认为我的问题与父母有关 我的项目父级有什么错误 请帮帮我 下面是我的 Jav
  • WCF Web服务流响应的最佳实践

    我正在尝试从 WCF Web 服务中提取大量数据 请求相当小 而响应消息将非常大 目前 由于 IIS6 对其可分配的内存 1 4GB 有限制 Web 服务正在引发 SystemOutOfMemory 异常 我在一些博客中读到 实施流式传输可
  • 如何优雅地降级 CSS 视口单位?

    CSS 视口单位 vw vh vmin vmax 非常棒 我想开始将它们用于字体 但我注意到here http caniuse com viewport units他们没有得到广泛的支持 我尝试在不支持的浏览器中搜索任何用于优雅降级的最佳实