Which CSS units to choose. Which is better, percentages, pixels, em, etc.
When developing a site, CSS cascading style sheets are actively used. They use various units of measurement, including pixels, percentages, inches, etc. In the process of coding a website page, a developer often faces the question of which units to use.
Indeed, why is so many units in CSS for? This is for convenience and flexibility. The developer can independently apply the necessary units of measurement based on the task. You can often notice how thoughtlessly only one unit of measurement is used throughout the site, chosen for some reason. This is the wrong approach, you need to use units based on the situation.
What units of measure exist in CSS ? All units of measurement can be divided into two broad categories: relative and absolute . Relative units determine the size of an element relative to a value of a different size, while absolute units are independent of the output device.
Relative units are often used to work with text content or when you need to calculate the percentage between elements. Relatives include:
- The font height of the current element ( em ),
- Height of letter x ( ex ),
- Pixels ( px ),
- Interest (% ).
As for absolute units, they are used less often than relative ones. Absolute units include:
- Inch, 1 inch equals 2.54 cm ( in ),
- Centimeter ( cm ),
- Millimeter ( mm ),
- Point, 1 point equals 1/72 inch ( pt ),
- A peak, 1 peak equals 12 points ( pc ).
Now that we have examined the units of measurement and their groups, let's figure out which units to use where. It is worth remembering that the choice of units of measure also depends on the output device, for example, screen or print . The following are recommended for the screen: em, px,% . For printing, you can use: em, cm, mm, in, pc, pt,% . For example, when laying out a page, the width of the blocks can be set as a percentage, the height in pixels, the size of the text in em or pixels. Thus, it is up to the developer to decide which CSS units to choose based on the needs.
- 09.11.23IT / Database Errors when migrating from MySQL 5.6 to 5.7 and how to fix them - database dump import failed with an error or INSERT does not work. Disabling STRICT_TRANS_TABLES strict mode or using IGNORE
- 09.07.22IT / Misc Convert office files DOC, DOCX, DOCM, RTF to DOCX, DOCM, DOC, RTF, PDF, HTML, XML, TXT formats without loss and markup changes
- 07.07.22IT / Safety How to protect PHP, JS, HTML, CSS source code - obfuscation, minification, compression and encryption
- 06.07.22IT / Safety Connection not secure, problem with Lets Encrypt - how to fix expired 09/30/2021 DST Root CA X3, remove it manually and install ISRG Root X1. Example on MS Windows 7
- 08.07.21IT / Misc How to make a free translation for a website without an API, translate documents in Google Translate