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.
- IT / Misc 08.07.21 How to make a free translation for a website without an API, translate documents in Google Translate
- IT / Misc 06.07.21 How to make a subscription button on a website, a subscriber base and automatic mailing
- Food / Misc 06.07.21 How to quickly cook delicious fried pies with potatoes and onions
- IT / Misc 04.07.21 Caching - create, load and reset. Where to store the cache, methods and types of caching
- IT / Database 03.07.21 Custom NoSQL - storing data in files and not only in a database. Storing settings, small data and caching files