Home > Developer > Web Develop
As a front-end developer, the length units in CSS are very familiar nouns in our work, because without them, we cannot declare how large a character should be, or how much white should be left around some of the images, or even cause the CSS to not work properly, so in many CSS properties, They are all dependent on the length units to display various page elements.
1. What are the length units?
The unit of length, in fact, is also very common in our lives, for example, centimeters, millimeters, inches, and often touched pixels (px), the font height (em) of the element, the height of the letter X (ex), the percentage (%), and so on, but we can all boil them down to two categories: the first category, is the absolute length unit, and the second type is the relative length unit.
2. Absolute Length Unit
What is the absolute length unit? What are the specific ones? And how is it applied?
Absolute length unit is better understood, it is a fixed value, a real physical value, it is not with the device or other factors affected by the length of units.
Specific absolute length units mainly include the following:
1),cm, CM: a length unit of measure, 1m=100cm.
2),mm, mm: as in centimeters, it is also a unit of measure of length, 1cm=10mm; mm is also the unit of measure of rainfall.
3),in, inches: This is the unit on the American ruler, 1 inches = 2.54 centimeters, 12 inches = 1 inches.
4),PT, point (points): A printing unit of measure, 1 inches equivalent to 72 points, for example, the element p is set to 24 points, is 1 inches one-third (1/3); so,p{font-size:24pt;} is equivalent to p{font-size:0.33in;}.
5), PC, dispatch card (Picas): A printing term, 1 cards equivalent to 12 points, 6 cards equivalent to 1 inches.
Of course, because these units are absolute length units, in our web development, the use of less, mainly because the absolute length of the unit is not conducive to page screen rendering, they are more used in printing, printing and other directions.
3. Relative length unit
Relative length units, we have seen more, for example, px,em,ex,rem; These are relative length units.
1) px, pixel:px is relative to the display screen resolution. when setting the font size with PX, it may be more stable and accurate. However, there are some problems with this method, for example: IE cannot adjust the font size using PX as the unit, most of the foreign sites can be adjusted because they use EM or REM as font units;Firefox can adjust px and em,rem, but 96% The above Chinese netizens still like to use IE browser. In order to ensure the user experience and Web page effects, the "em" unit is also introduced in web development.
2)em, the font height of the element: em is calculated relative to the property value of the parent element, so EM is a non-specific value. It requires a reference point, which is generally based on the "font-size" of <body>. The default font height for any browser is 16px. All unadjusted browsers are compliant with: 1em= 16px. sometimes in order to simplify the conversion of font-size, you need to declare font-size=62.5% in the body selector in the CSS, this time 1em=16px*62.5%=10px, so 12px=1.2em,10px=1em, In other words, you simply divide the original PX value by 10 and then replace it with EM as the unit. The value of EM is not fixed; thevalue of EM inherits the font size of the parent element.
3) Ex, the height of all font elements in small write x: this is mainly related to fonts, different fonts, even if the same font size is set, but the value of ex may be different, mainly because the font x height may be different. However, this in our actual development of the use of less, generally set EM, ex will default to half of EM, but also for the convenience of calculation, the 1ex hypothesis equals 0.5em, because most of the lowercase letters of the font are the corresponding capital height of half.
4) rem, element font height: compared to EM more than an "R", is a new relative unit of CSS3, is the root em, shorthand rem, the difference between this unit and EM is that when using REM to set the font size for an element,REM is relative to the HTML root element. with REM, you can adjust all font sizes proportionally by modifying only the root elements, and avoid the chain reaction of the font size to layer by level. Currently, all browsers have REM support in addition to the versions below IE9.
In addition, we also need to pay attention to two points in the development:
First, if REM does not specify a reference value in the root element (HTML font), then the browser defaults to 1 REM, which is 16px, and if REM has a specified value, 1rem is equal to the specified value.
Second, HTML is set to 62.5% or 10px, because the font size less than 12px or 75% does not support conversion. This may be related to the size of some browsers that do not support 12px or less. Therefore, using REM units, the default font size for HTML fonts must be set to 12px or higher. If the browser conversion is less than 12px, the default font is 12px automatically.
Written in the last
In the development, we exactly how to choose the length of units, need to be based on the actual development of the specific needs, for example, some of our projects, just browse on the PC, do not need to browse on the mobile side, do not need to do responsive development, in fact, the entire page units, with PX, can meet the development needs; , you may need to do a responsive development, it depends on the specific circumstances, but no matter what, you put the length of the basic attributes and nature of the unit to understand, how to choose, is very simple things, today's article, hope to give you a little inspiration, but also hope to help those who do not know the basic knowledge of the students.
Finally, I share with you an online Px,em,rem unit conversion tool, address: http://pxtoem.com/ here, I can not, because my own configuration of the second-hand computer, and the screen, I want to write this article, ready to dismantle the chassis, a girl home, something bad, are their own repair, the computer is broken, self-repair, wireless network, self-repair, network TV, also want to engage themselves, This is to find an IT female benefits, today is 38 women's Day, please our fellow men, cherish the IT woman around you. Finally, said a sentence, I am also a woman, please everyone later on, do not call my brother again, call me small two on the good. Women's Day, I wish the World woman live more young!
The length of the Web Development Unit (PX,EM,EX,REM), how to use, read this article is enough!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
