对具有两个不同字体尺寸的移动和桌面视图进行单个标题

发布于 2025-01-23 07:28:32 字数 387 浏览 0 评论 0原文

在我的应用程序中，我希望标题以两种不同的字体尺寸用于移动视图和桌面视图，

这是我实现的目标，它可以使用！

<h2 class="mb-0 d-none d-lg-block" >My APP Name Desktop</h2>
<h2 class="mb-0 d-block d-lg-none" style="font-size: medium;">My APP Name Mobile</h2>

但是，除了使用两个h2的媒体查询以外，没有使用两个H2在单个标题中将两者组合在一起。

原文

In my application i want the heading to be in two different fonts-sizes for mobile view and desktop view

Here is what i achieved to do so and it works!

<h2 class="mb-0 d-none d-lg-block" >My APP Name Desktop</h2>
<h2 class="mb-0 d-block d-lg-none" style="font-size: medium;">My APP Name Mobile</h2>

But instead of using two h2 is there any way to combine both in a single heading other than media queries in css file.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

霞映澄塘 2025-01-30 07:28:32

您可以使用一种完全响应的方式来声明字体大小。一种方法是使用font-size：clamp（value1，value2，value3）。

第一个值是最小值值 - 字体大小永远不会比您在此处设置的尺寸低。

第二个值是首选值。该元素将尝试将字体大小设置为此值。

最后一个值是最大值值。该元素的字体大小将永远不会超过此。

至于设置值，我建议使用em，rem或vw -units以产生完全响应的效果。在em -unit上使用font-size属性上的属性允许设置元素的字体大小相对于其父的字体大小。当父元素的大小变化时，孩子的大小会自动变化。

阅读有关EM＆amp; amp;的更多信息。 rem on the font-size-property:

与价值观！尝试在带有示例代码段的新选项卡中调整浏览器的大小，并查看功能clamp（）的功能。

body {
  width: 800px;
  font-size: 40px;
}

div {
  width: 50%;
  font-size: clamp(0.5em, 8vw, 8em);
}

<body>
  <div>
    Font size
  </div>
</body>

You could use a fully responsive way of declaring your font-size. One way to do this is using font-size: clamp(value1, value2, value3).

The first value is the minimum value - the font-size will never be lower than what you set here.

The second value is the preferred value. The element will try to set the font-size to this value.

The last value is the maximum value. The element's font size will never exceed this.

As for setting the values, I suggest using either em, rem or vw-units for a fully responsive effect. Using the em-unit on the font-size property allows setting the font size of an element relative to the font size of its parent. When the size of the parent element changes, the size of the child changes automatically.

Read more about em & rem on the font-size-property: https://www.geeksforgeeks.org/difference-between-em-and-rem-units-in-css/

Play a bit around with the values! Try resizing the browser in a new tab with the example snippet and see the effect of how powerful clamp() is.

body {
  width: 800px;
  font-size: 40px;
}

div {
  width: 50%;
  font-size: clamp(0.5em, 8vw, 8em);
}

<body>
  <div>
    Font size
  </div>
</body>

回复收藏 0 原文

马蹄踏│碎落叶 2025-01-30 07:28:32

使用以下方式：
JS代码

function device() { if (navigator.userAgent.match("Android") || (navigator.userAgent.match("Macintosh") && navigator.maxTouchPoints > 0) || navigator.userAgent.match("iOS") || navigator.userAgent.match("iPhone") || navigator.userAgent.match("iPad") || navigator.userAgent.match("BlackBerry") || navigator.userAgent.match("iPod") && navigator.maxTouchPoints > 0) { mobile = true; console.log("Is mobile device: <TRUE>") } else { mobile = false; console.log("Is mobile device. <FALSE>"); return mobile; } }  //Mobile/Or not?
If (device() == true) {
document.getElementById('title').style.fontSize = 'medium'
}
else {
document.getElementById('title').style.fontSize = '20pt'
}

HTML代码

<div style=font-family:sans-serif; id=title>Hello World :-)</div>

或使用CSS

div#title {
font-size: calc(20vw + 20vh / 2.5)
}

Use this:
JS Code

function device() { if (navigator.userAgent.match("Android") || (navigator.userAgent.match("Macintosh") && navigator.maxTouchPoints > 0) || navigator.userAgent.match("iOS") || navigator.userAgent.match("iPhone") || navigator.userAgent.match("iPad") || navigator.userAgent.match("BlackBerry") || navigator.userAgent.match("iPod") && navigator.maxTouchPoints > 0) { mobile = true; console.log("Is mobile device: <TRUE>") } else { mobile = false; console.log("Is mobile device. <FALSE>"); return mobile; } }  //Mobile/Or not?
If (device() == true) {
document.getElementById('title').style.fontSize = 'medium'
}
else {
document.getElementById('title').style.fontSize = '20pt'
}

HTML Code

<div style=font-family:sans-serif; id=title>Hello World :-)</div>

Or using CSS

div#title {
font-size: calc(20vw + 20vh / 2.5)
}

回复收藏 0 原文

~没有更多了~

关于作者

且行且努力

暂无简介

文章

25 人气

关注发私信

友情链接

文江博客

对具有两个不同字体尺寸的移动和桌面视图进行单个标题

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

饮湿

明月

02

hs1283

风向决定发型

落花浅忆

友情链接

对具有两个不同字体尺寸的移动和桌面视图进行单个标题

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

饮湿

明月

02

hs1283

风向决定发型

落花浅忆

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。