CODEWITHSUNDEEP
htmlcss
user2929209
user2929209

Reputation:

Viewport width/height (10vw) max/min font size

I've just stated using the viewport unit, not sure how to handle this so any feedback is appreciated.

I've created element

<h4>text here</h4>

added some style

h4 {font-size:7vp;}

This is excellent on mobiles devices, phone and laptops. But once the screen size exceeds that of a laptop to keep up with the viewport width, the height of the text gets two large for the viewport height.

If you know what I mean.

Im looking for something like 

max-size:

but more like

max-font-size:

Upvotes: 1

Views: 2191

Answers (1)

Ali Elzoheiry
Ali Elzoheiry

Reputation: 1682

There is no such thing as max-font-size but you can use media queries to detect when the window is now desktop size. For example:

media screen and (min-width: 768px) {
  h4 {
    font-size: 14px;
  }
}

This will override your font-size from vh to px when the window size is larger than 768px.

Note: To use media queries make sure you add this tag in your main html file

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Upvotes: 2

Related Questions