• Font Size Using Vanilla CSS
  • Originally by Jason Knight
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: ZNCQHN
  • Proofread by: HurryOwen, JohnieXu

Use native CSS to implement responsive fonts

Sometimes the font size ratio needs to be adjusted according to the screen width. Oddly enough, I’ve seen people go through a lot of trouble to implement this feature. For example, Ahmed Sakr Outlines the use of RFS in his article Medium. Although he gives a good overview of how RFS works, RFS itself is obsolete in the era of CSS3 computing and comparison.

Unfortunately, these problems are common among people who use CSS preprocessors, and these programs are much like frameworks. The people who create and use such systems are clearly not qualified to write HTML code, let alone apply CSS, and then tell others how to do it.

Font unit calculation

Happily, this is actually quite easy to do. Imagine a minimum font size of 1em, a maximum font size of 4em, and a maximum font size of 75REM. 75rem corresponds to 1600px (for normal users, 1rem is 16px), 1500px (for large font users, such as myself, 1rem is 20px) and 2400px (for 4K devices, 1rem is 32px).

font-size:max(1em.min(4em.calc(100vw * 4 / 75)));
Copy the code

You can do it yourself

font-size:max(1em.min(4em.5.333 vw));
Copy the code

The 4 in math only needs to match the 4em in min calculation.

You won’t need a large Derpy framework or a garbage preprocessor, and you won’t have any memory garbage. This is a computational capability that CSS can handle on its own.

You can then leverage CSS variables to store various values to make them easier to apply in your layout.

Compare with other implementations

Instead of using a media query to manually declare the maximum size elsewhere, we can hardcode the minimum and maximum sizes into the formula using min, Max. A simple call can solve all the problems, without having to worry about (or write code for) saying (max-width: 1200px) or code for separate media queries with maximum values, we just need to put them all in one statement.

It also allows things to actually get to a minimum. Most of these attempts only increase the base size to a small fraction of the display width, meaning that the minimum size is not the minimum size you need to obtain or the smallest possible size for the layout.

Again, this is based on 100% EM, so you’re not streamlining availability and accessibility in pixels. Again, as I’ve said many times over the past 15 years, if you use EM and % as font size control units, then the padding, margin, and media queries should all be based on EM and not mixed. For users of non-standard font sizes, it will eventually clutter up and crash. Like me, I have 20px == 1REM on my laptop and workstation and 32px == 1EM on my media center.

No one seems to like peas mixed with porridge. – r. Lutece

Native CSS code

Use simple page presentation:

<section>
  <h2>Sample Section</h2>
  <p>
   This card uses a relatively simple CSS calculation to rescale <code>margin</code>.<code>padding</code>.<code>font-size</code>, and <code>border-radius</code> between a minimum and maximum size based on screen width.
  </p><p>
   No LESS/SASS/SCSS rubbish, no NPM package trash, just flipping do it with <code>calc</code>.<code>min</code>.<code>max</code> and some native CSS variables. 
  </p>
 </section>
Copy the code

First, we create some variables to handle the various minimum and maximum sizes required:

:root {
 --base-scale:calc(100vw / 75);
 --h2-font-size:max(1em.min(4em.calc(var(--base-scale) * 4)));
 --padding-size:max(1em.min(2em.calc(var(--base-scale) * 2)));
 --margin-size:max(0.5 em.min(2em.calc(var(--base-scale) * 2)));
 --border-radius:max(1em.min(3em.calc(var(--base-scale) * 3)));
}
Copy the code

Different display screens have different widths; simply change 75 to the desired width (in em). We’re just doing the calculations as needed.

Similarly, Max (value) is actually the maximum size of your device, min(value) is the minimum size of your device, and the final calculated value should be the minimum size displayed on your device screen min(value).

The practical applications are simple:

main section {
 max-width:40em;
 padding:var(--padding-size);
 margin:var(--margin-size);
 border-radius:var(--border-radius);
 background:#FFF;
 border:1px solid # 0484;
}

h2 {
 font-size:var(--h2-font-size);
}
Copy the code

The result? When the page is large:

When the page is small:

The padding, border-radius, heading, and so on are all reduced in size.

The online demo

Use native CSS to set up responsive fonts

As with all my examples, the directory is:

Cutcodedown.com/for_others/…

The project is open, easily accessible, and contains the.rar file for the entire project, which can also be downloaded and tested easily.

Do what you like!

Deficiency in

There’s only one real drawback: older browsers don’t support it. You know which one it is? Oh, I wish I could get better!!

However, if you are worried about this, please refer to “Caniuse” as always.

Caniuse.com/css-math-fu…

Besides, some people say it’s too hard to remember. Are you serious? Copy and paste tool man!

conclusion

I’m often amazed at how much code people put into “making it easier”, and in the process, you often take away control of the results. Even if you use a preprocessor or helper script to do this, it should be easy to insert values into the formula above. But, honestly, if you think it’s worth spending 9K of SCSS to do it… Then maybe it’s time to step away from the keyboard and start something less detail-oriented, like macrame.

But let’s be honest, “min” and “Max” are very new CSS features — at least in 2020 — even though they are supported by all current browser engines. The extensive pre-processing of CSS style files and other time-consuming processing are intended to fill in gaps in the specification and ensure browser compatibility.

CSS variables are superior to the way variables are defined in precompiled languages (LESS, SASS, SCSS) because you can change them dynamically and it affects everything that calls them. They are compiled by the preprocessor. For those who are too lazy to look for replacements, I mark them as useless junk. In fact, this code implementation is very useful!

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.