CSS font size dynamically between interval

问题:

With small screen size (mobile) the font size is fixed to 14px. On really large screens, the font size is fixed to 18px. So it can never be lower than 14px and never higher than 18px. The media queries take care of that.

Then we have the middle ground where I want the font size to be dynamic between 14px and 18px. For that I use font-size: calc(.5vw + .85em); which works ok, but not great. I don't know how to calculate it to start from 14px and end at 18px between the screen width 40rem (16 * 40) and 65rem.

Any ideas?

.wrap {
  font-size: 16px;
}

p {
  font-size: calc(.5vw + .85em);
}

p:before {
  content: 'Desktop: ';
  opacity: .5;
}

@media screen and (min-width: 65rem) {
  p {
    font-size: 18px;
  }
  p:before {
    content: 'Desktop large: ';
    opacity: .5;
  }
}

@media screen and (max-width: 40rem) {
  p {
    font-size: 14px;
  }
  p:before {
    content: 'Mobile: ';
    opacity: .5;
  }
}

<div class="wrap">
  <p>
    text
  </p>
</div>

I also added it here: https://jsfiddle.net/6ybkp7a1/6/

Example

When I'm on a screen width of 40.1rem (just above 40rem), I should have a font-size like 14.1px (or whatever it may be), just above 14px.

回答1:

You can try this. It will go gradually from 14px to 18px.

How it works?

100vw is our screen size so it will vary from 40rem and 65rem in the needed region. Minus 40rem we will have a variation between 0rem and 25rem. 25rem is equal to (16px * 25) = 400px. Our variation is now from 0 to 400px and if we divide by 100 and we add 14px we have a variation between 14px and 18px.

.wrap {
  font-size: 16px;
}

p {
  font-size: calc(14px + (100vw - 40rem)/100); /*or 14px + 1vw - 0.4rem */
}

p:before {
  content: 'Desktop: ';
  opacity: .5;
}

@media screen and (min-width: 65rem) {
  p {
    font-size: 18px;
  }
  p:before {
    content: 'Desktop large: ';
    opacity: .5;
  }
}

@media screen and (max-width: 40rem) {
  p {
    font-size: 14px;
  }
  p:before {
    content: 'Mobile: ';
    opacity: .5;
  }
}

<div class="wrap">
  <p>
    text
  </p>
</div>

回答2:

Set another media query for min-width: 40rem along with other media queries you have. That should take care of screen size in between those two screen sizes you have added.

Here's the working example(JSFiddle):

.wrap {
  font-size: 16px;
}

@media screen and (max-width: 40rem) {
  p {
    font-size: 14px;
  }
  p:before {
    content: 'Mobile: ';
    opacity: .5;
  }
}

@media screen and (min-width: 40rem) {
  p {
    font-size: calc(.5vw + .85em);
  }
  p:before {
    content: 'Desktop: ';
    opacity: .5;
  }
}

@media screen and (min-width: 65rem) {
  p {
    font-size: 18px;
  }
  p:before {
    content: 'Desktop large: ';
    opacity: .5;
  }
}

<div class="wrap">
  <p>text</p>
</div>