What is em? Introduction and conversion method of em and px
|
What is em? em refers to the font height, and the default font height of any browser is 16px. So all unadjusted browsers will conform to: 1em=16px. Then 12px=0.75em, 10px=0.625em. To simplify font-size conversion, you need to declare Font-size=62.5% in the body selector in CSS. This will change the em value to 16px*62.5%=10px, so 12px=1.2em, 10px=1em. In other words, you only need to divide your original px value by 10 and then use em as the unit. em has the following characteristics: 1. The value of em is not fixed; 2. em will inherit the font size of the parent element. Rewrite steps: 1. Declare Font-size=62.5% in the body selector; 2. Divide your original px value by 10, and then use em as the unit; It’s simple, right? If the problem can be solved with just the above two steps, no one would use px. After the above two steps, you will find that the fonts on your website are larger than you imagined. Because the value of em is not fixed and will inherit the size of the parent element, you may set the font size in the content div to 1.2em, which is 12px. Then you set the font size of the selector p to 1.2em, but if p is a child of content, the font size of p is not 12px, but 1.2em = 1.2 * 12px = 14.4px. This is because the font size of content is set to 1.2em. This em value inherits the size of its parent element body, which is 16px * 62.5% * 1.2=12px. As p is its child, em inherits the font height of content, which is 12px. So 1.2em of p is no longer 12px, but 14.4px. 3. Recalculate the em values of the fonts that are enlarged. Avoid repeated declarations of font sizes, that is, avoid the phenomenon of 1.2 * 1.2 = 1.44 mentioned above. For example, if you declare the font size in #content as 1.2em, then when declaring the font size of p, it can only be 1em, not 1.2em, because this em is not that em. It inherits the font height of #content and becomes 1em=12px. |
<<: Creating private members in JavaScript
Recommend
Understanding and application of JavaScript ES6 destructuring operator
Table of contents Preface The role of deconstruct...
Linux CentOS 6.5 Uninstall, tar and install MySQL tutorial
Uninstall the system-provided MySQL 1. Check whet...
Steps to create a Vite project
Table of contents Preface What does yarn create d...
How to use the Linux nl command
1. Command Introduction nl (Number of Lines) adds...
What does this.parentNode.parentNode (parent node of parent node) mean?
The parent node of the parent node, for example, t...
Modification of time zone problem of MySQL container in Docker
Preface When Ahhang was developing the Springboot...
Mini Program to Implement the Complete Shopping Cart
The mini program implements a complete shopping c...
Detailed explanation of replication configuration example between mysql containers
background Last week the company trained on MySQL...
Some small methods commonly used in html pages
Add in the <Head> tag <meta http-equiv=&q...
mysql 5.7.20 win64 installation and configuration method
mysql-5.7.20-winx64.zipInstallation package witho...
Detailed explanation of how to create an array in JavaScript
Table of contents Creating Arrays in JavaScript U...
Implementation of CentOS8.0 network configuration
1. Differences in network configuration between C...
Hbase installation and configuration tutorial under Linux
Table of contents Hbase installation and configur...
How to enable the slow query log function in MySQL
The MySQL slow query log is very useful for track...
WEB Chinese Font Application Guide
Using fonts on the Web is both a fundamental skill...