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
Use PSSH to batch manage Linux servers
pssh is an open source software implemented in Py...
docker cp copy files and enter the container
Enter the running container # Enter the container...
Implementation of vue+drf+third-party sliding verification code access
Table of contents 1. Background 2. Verification p...
Summary of several implementations of returning to the top in HTML pages
Recently, I need to make a back-to-top button whe...
Solution to the problem that VMware15 virtual machine bridge mode cannot access the Internet
Description Solution VMware 15 virtual machine br...
Recommend a cool flashing alarm button
The effect is as follows: The code is as follows ...
Solve the problem of not being able to access the RabbitMQ management page in the Linux server
Because a certain function of my project requires...
MySQL changes the default engine and character set details
Table of contents 1. Database Engine 1.1 View dat...
Vue Router loads different components according to background data
Table of contents Requirements encountered in act...
W3C Tutorial (13): W3C WSDL Activities
Web Services are concerned with application-to-ap...
WeChat Mini Program user authorization to obtain mobile phone number (getPhoneNumber)
Preface The mini program has a very convenient AP...
Common ways to optimize Docker image size
The Docker images we usually build are usually la...
Tutorial on installing MySQL 5.7.9 using RPM package under CentOS 7
Recorded MySQL 5.7.9 installation tutorial, share...
Vue uses dynamic components to achieve TAB switching effect
Table of contents Problem Description What is Vue...
How to configure common software on Linux
When you get a new Linux server, you generally ha...