Interest. Pixels, Em, Ex and Percentages - Relative Sizes in CSS
A percentage is a unit of measurement of an element relative to its containing block. This works great for images: here we set the dimensions for the image, the width of which is always 50% of the width of the container. Try narrowing your browser window to see what happens!
article img ( float : right ; width : 50% ; )You can even use min-width and max-width to limit the maximum and minimum size Pictures!
percent width layout
You can use a percentage to create a template, but this approach will require more work. In this example, the nav element's content begins to wrap around in an unpleasant way when the browser window is too narrow. It all depends on what works best with your content.
nav ( float : left ; width : 25% ; ) section ( margin-left : 25% ; )
When the layout is too narrow, the nav element is squished. Worse yet, you can't use min-width for nav to fix this because this property will not keep the column on the right from attacking.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
13 / 19Percentage notation is usually used in cases where it is necessary to change the value relative to the parent element or when the dimensions depend on external conditions. So, a table width of 100% means that it will adapt to the size of the browser window and change along with the window width.
Designations
| Description | Example | |
|---|---|---|
| <тип> | Indicates the type of the value. | <размер> |
| A && B | The values must be output in the order specified. | <размер> && <цвет> |
| A | B | Indicates that you need to select only one value from the proposed ones (A or B). | normal | small-caps |
| A || B | Each value can be used independently or together with others in any order. | width || count |
| Groups values. | [ crop || cross ] | |
| * | Repeat zero or more times. | [,<время>]* |
| + | Repeat one or more times. | <число>+ |
| ? | The specified type, word, or group is optional. | inset? |
| (A, B) | Repeat at least A, but no more than B times. | <радиус>{1,4} |
| # | Repeat one or more times separated by commas. | <время># |
Example
| Table Contents |
Specification
Each specification goes through several stages of approval.
- Recommendation - The specification has been approved by the W3C and is recommended as a standard.
- Candidate Recommendation ( Possible recommendation ) - the group responsible for the standard is satisfied that it meets its goals, but requires help from the development community to implement the standard.
- Proposed Recommendation Suggested Recommendation) - at this stage the document is submitted to the W3C Advisory Council for final approval.
- Working Draft - A more mature version of a draft that has been discussed and amended for community review.
- Editor's draft ( Editorial draft) - a draft version of the standard after changes were made by the project editors.
- Draft ( Draft specification) - the first draft version of the standard.
Browsers
The following notations are used in the browser table.
- - the property is fully supported by the browser with all valid values;
- - the property is not perceived by the browser and is ignored;
- - may appear during operation various errors, or the property is only partially supported, for example, not all valid values are valid or the property does not apply to all elements that are specified in the specification.
The number indicates the browser version from which the property is supported.
Using the font-size attribute to scale text is one of the most difficult aspects of styling in CSS. CSS offers four units to measure the size of text displayed in a web browser. Which of these four units is most suitable for web documents? This issue has caused a lot of discussion and controversy. It is difficult to give a definite answer to such a question.
Getting to know the units
- Percentage ( % ): Percent is very similar to em , except for a few key differences. First, the current font size is 100% (i.e. 12pt = 100%). Using the Percentage unit allows you to enlarge/reduce your text for easier reading.
Um ( em): em is a scalable unit that is used for web documents. One em equals the current font size. For example, if the document's font size is 12pt, then 1em equals 12pt. Since em is scaled, 2em equals 24pt, .5em equals 6pt, etc. Due to its scalability and high compatibility with mobile devices, em is increasingly used in web documents.
Pixels ( px): Pixels are fixed-size units that are used for everything readable on computer screen. One pixel equals one dot on a computer screen (this is the smallest division of your screen's resolution). Many web designers use pixels in web documents to ensure that the website appears pixel-perfect when displayed in a browser. The only problem is that the pixels cannot be enlarged to accommodate low-vision readers or reduced for easier reading on mobile devices Oh.
Points ( pt): Dots are traditionally used in printed publications(i.e. for everything that is printed on paper). One point equals 1/72 of an inch. Dots are very similar to pixels in that they have a fixed size and cannot be enlarged/shrinked.
What's the difference?
The difference between these units is easy to understand at specific examples. Here's how they relate to each other: 1em = 12pt = 16px = 100%. Let's see what happens when we increase the main font size (using the body CSS selector) from 100% to 120%.
As you can see, Ems and Percentage increase as the base font size increases, but Pixels and Dots do not. It's easy to use an absolute size for your text, but it's much easier to use scalable text that displays on any device. Therefore, it is preferable to use Em and Percent units for the text of a web document.
EM or Percentage?
We found that Point and Pixel are not the best units for web documents. So, we are left with Em and Percent. Theoretically, Em and Percent are the same units, but in practice there are minor differences between them that cannot be ignored.
In the example above, we used the unit Percentage as the base font size (for the body tag). If you change the base font size from Percent to Em (i.e. body ( font-size: 1em; )), you probably won't notice a difference. Let's see what happens when the body font size is 1em and when the client changes the browser's "Text Size" setting (this setting is available in some browsers, such as Internet Explorer).
When the text size in the client browser is set to "medium", there is no difference between Em and Percent. But if you change this setting, the difference will become quite noticeable. With the Smallest setting, the Ems are much smaller than the Percents. And with the “Largest” setting, the opposite is true - Em is much larger than Percent. You could say that Em units are scaled as they should be, but in practice such text is scaled too sharply, and on some devices the smallest text becomes unreadable.
Conclusion
In theory, the Em unit is the new standard for font sizes in web documents, but in practice it turns out that the Percent unit is more user-friendly. When client settings change, text that uses the Percentage unit scales appropriately, allowing designers to maintain readability, accessibility, and visual design.
Winner: percentage (%).
Usually when I create new design then for the body element I use percentages (body ( font-size: 62.5%; )) and then use em to scale further. As long as body is set to Percentage, you can use either Percentage or Em for any other rules and CSS selectors while still taking advantage of the benefits of using Percentage as your primary font size.
Over the past few years, this practice has become very common in web design.
Pixels are now used as valid units of font size (users can use the browser's "zoom" feature to read small text). However, the use of pixels becomes problematic due to mobile devices with very large screens. high density pixels (some Android devices and iPhone have a density of 200-300 pixels per inch, which makes 11 and 12 pixel fonts difficult to read). So, I continue to use Percentage as the main font size for web documents.