When the display layout adapted to the same page on different devices, due to the density of the screen, to bring a variety of different size and arrangement of the problem, as shown below, this video is well demonstrated when we used to bring pixels limitations, Up master very heart to do animation effects easy to understand.
Then the face of the virtual world, how to maintain a consistent user experience across different browsers it?
web developers and community members to help us summarize several common unit of measure: px, em, rem, vh / vw.
We all know that px is pixel unit, the focus here said about the latter three.
em:描述相对于应用在当前元素的字体尺寸。一般**浏览器字体大小**默认为16px,那么此时2em==32px;
rem:相对于**根元素html的font-size**的尺寸;
vh(viewpoint height)和vw(viewpoint width):是单位为百分比的尺寸,都是**视窗高度/宽度**的1%
Further, ex, CH is the relative length, ex English alphabet height independent of x, the width of the number 0 CH dependent, with very little, do understand.