make a single heading for both mobile and desktop view with two different font sizes-CodePudding

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  >My APP Name Desktop</h2>
<h2  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.

CodePudding user response：

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>

CodePudding user response：

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)
}