Set font size using % and em

Example analysis:

is the body element (parent element) sets the default font-size value in percentage, and then sets the font size of the <h1> and <p> elements (child elements) in em. This can effectively solve the problem of em in IE browser and can adjust the text size in all browsers.

Continuing Learning

new file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

submit Reset Code

Automatic operation

Previous section Next Section

Tutorial List

get help

Course Recommendations
Courseware download

The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~

Students who have watched this course are also learning

图片放大关闭

Set font size using % and em

ElementaryCSS code example

ElementaryHTML code example

IntermediateCSS advanced example video tutorial

ElementaryScala Tutorial

ElementaryCSS Online Manual

ElementarySVG Tutorial

ElementaryAngularJS Chinese Reference Manual

ElementaryGo language tutorial manual

ElementaryRedis command operation Chinese manual

ElementaryPython 3 Tutorial

ElementaryXML DOM tutorial

ElementaryMemcached command operation manual