Home >Web Front-end >CSS Tutorial >A CSS writing method that allows users to control the font size of web pages_Experience exchange

A CSS writing method that allows users to control the font size of web pages_Experience exchange

WBOY
WBOYOriginal
2016-05-16 12:07:121404browse

Nowadays, most domestic websites use CSS to set the font size to 12px. Although pixels are also relative size units, they are only relative to the screen resolution. When the screen resolution is constant, if you feel that the font size is too small, read If there are difficulties, there is nothing you can do in non-standard browsers, so if you change the unit to em, you can use CTRL mouse scrolling to enlarge the words, or use View>Text Size on the menu to change the size of the words.

How to set

1. Set the font size in the body tag to 62.5%. If there is no CSS setting in the body, the browser's default size is 16px, and 62.5 is set. %, then the font size =16px*62.5%=10px. At this time, you can use em to easily set the size. For example, if you need to use 12px, just set it to 1.2em.

body{
font-size: 62.5%;
}

h1{
fong-size: 1.4em;/* The size of the h1 word is equivalent to 14px * /
}
2. Set the font size in body to 75%, then font size = 16px*75%=12px, 1em is equivalent to 12px.

body{
font-size: 75%;
}

h1{
fong-size: 1.5em;/* The size of the h1 word is equivalent to 18px */
}

The first method Better.

If it is an English website, it can also be set to small, x-small...

Of course, in this way, the design requirements for the page will be higher.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn