Detailed explanation of the correct way to open em in CSS
Why do we say “usually 1em=16px”? The default text size rendered by the user's browser is "16px". In other words, the default text size of the "body" and its child elements in the web page is "16px" in the user's browser.
What exactly is em? em: relative unit. Its base value is the current element's font size; the actual value depends on its (inherited) parent element. (↑: How em is related to the parent element <body> I'm <p>yunxiaomeng</p>. </body>
body{
font-size: 16px;
}
p{
font-size: 1.2em;
}
Do you see the red frame in the picture? The actual rendered size (target pixel value) of the p tag is: 16 (px) x 1.2 = 19.2 (px) There is one important thing to note here: if another selector/attribute on the same element uses a different font-size value to override the previous value, this will change the base value of the em in this domain!
p{
font-size: 1.2em;
padding: 1.2em;
} Then the actual rendered value of padding (target pixel value) = 19.2(px) x 1.2 = 23.04(px) (i.e. 16 x 1.2 x 1.2):
This is why when you set em for each layer of child elements, the actual size may not seem to be what you want! Is it the same for rem? ! rem is also a relative unit, which changes relative to the root element.
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom = document.getElementsByTagName('html')[0];
window.onresize = function () {
htmlDom.style.fontSize=htmlWidth/20+'px';
};But many people mistakenly believe that the rem value corresponds to the "page size". In fact, this is wrong!
This is the end of this article on the correct way to open em in CSS. For more relevant CSS opening em content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future! |
<<: Multiple ways to insert SVG into HTML pages
>>: Detailed explanation of the 14 common HTTP status codes returned by the server
Recommend
Zookeeper request timeout problem in dubbo: configuration of mybatis+spring connecting to mysql8.0.15
I am going to review Java these two days, so I wr...
In-depth understanding of Vue's method of generating QR codes using vue-qr
Table of contents npm download step (1) Import (2...
Solution to the problem that Navicat cannot remotely connect to MySql server
The solution to the problem that Navicat cannot r...
Vuex implements a simple shopping cart
This article example shares the specific code of ...
Understanding MySQL clustered indexes and how clustered indexes grow
In this note, we briefly describe What is the B+T...
How to implement paging query in MySQL
SQL paging query:background In the company's ...
vue3.0+echarts realizes three-dimensional column chart
Preface: Vue3.0 implements echarts three-dimensio...
Use nexus as a private library to proxy docker to upload and download images
1. Nexus configuration 1. Create a docker proxy U...
How to view and clean up Docker container logs (tested and effective)
1. Problem The docker container logs caused the h...
Docker nginx example method to deploy multiple projects
Prerequisites 1. Docker has been installed on the...
Centos7.5 installs mysql5.7.24 binary package deployment
1. Environmental preparation: Operating system: C...
Example test MySQL enum type
When developing a project, you will often encount...
Some settings of Div about border and transparency
frame: Style=”border-style:solid;border-width:5px;...
Analyze the difference between querySelector and getElementById methods in JavaScript
Table of contents 1. Overview 1.1 Usage of queryS...
ReactHooks batch update state and get route parameters example analysis
Table of contents 1. How to update in batches Con...