Home > Developer > Web Develop
Original: 7 CSS Units might not Know about
As we all know, when using CSS technology, it is very tolerant of some strange problems to be trapped. And when we are confronted with new problems, this will put us in a very disadvantageous position.
However, with the development of the Web, new solutions are slowly maturing. Therefore, as a web design and front-end developer, we have no choice but to be familiar with the tools or attributes we use.
This also means that for those special tools or properties, even if they are seldom used, we can apply them to our work well when needed.
Today, I'll introduce some CSS properties that you might not know about before, such as PX and EMS measurements, but you probably haven't heard of them before. Let's take a look.
Rem
Start with a very similar unit that we are already familiar with. EM is defined as the font size relative to the text within the current object. If you set a font size for the BODY element, then the EM value of any child element of the body is equal to the font-size of the body setting.
< Body > <Divclass= "Test">Test</Div ></body>
Body { font-size14px;} Div { font-size1.2em; //calculated at 14PX * 1.2, or 16.8px}The font size in the div is 1.2em, which is 1.2 times times the size of the font that the div inherits from the parent class element. Here, the body font is 14px, then the font size of the div is 1.2*14=16.8px.
But what happens if you use EM to define the font size of nested elements in a layer of one level? In this little piece of code, we apply the same CSS as above, each of which inherits the font size from its parent, and increases gradually.
<Body> <Div>Test<!--* 1.2 = 16.8px -- <Div>Test<!--16.8 * 1.2 = 20.16px -- <Div>Test<!--20.16 * 1.2 = 24.192px -- </Div> </Div> </Div></Body>
Although this is what we want in some places, it is usually desirable to rely on a single relative unit of measure. In this case, REM should be used, and R in rem represents the root element, and its value is the font size set by the root element. In most cases, the root element is HTML.
HTML { font-size14px;} Div { font-size1.2rem;}So in the above three nested div doll font size is 1.2*14px = 16.8px.
Applies to Grid layout
Rems is not only suitable for font size, but also for grid layout. For example, you can use REM, which is based on the font size of the HTML root element, as the entire grid layout or the size unit of the UI library, and then use EM units in other specific places. This will give you more control over the font size and scaling,
. Container { width70rem; //* 14px = 980px}Conceptually, the idea of this approach is to have your interface scale based on your content. However, this does not make sense for all situations.
VH and VW
Responsive web design has a high dependency on percent rules. However, for every problem, CSS percentages are not the best solution. The CSS width is relative to the width of the nearest parent element that contains it. If you want to use the height or width of the viewport, rather than the parent element, is it swollen? VH and VW will be able to meet this demand.
1VH is equal to 1% viewport height. For example, if the browser height is 900px, then 1VH = 900*1%=9px, in the same vein, if the viewport width is 750px, 1VW is 7.5px.
They are used in a wide variety of applications. For example, we use a very simple method of using only one line of CSS code to achieve the same screen and other high boxes.
. Slide { height100vh;}Suppose you want to have a screen with the width of the title, you just set the title of the Font-size Unit for vm , the title of the font size will automatically be based on the width of the browser to zoom to achieve the font and viewport size synchronization effect, there is wood?!
Demo
Vmin and Vmax
VH and VW are relative to the width and height of the viewport, while Vmin and Vmax are the minimum or maximum values for both the viewport height and width. For example, if the browser's aspect are 700px and 1100px respectively, then 1vmin=7px,1vmax=11px, or 1vmin=8px,1vmax=10.8px if aspect are 1080px and 800px respectively.
So when do you need these values?
Suppose there is an element that you need to make it always visible on the screen. Just use vmin units for their height and width, and give them a value below 100 to do it. For example, you can define a square that has at least two edges touching the screen:
. Box { height100vmin; width 100vmin;}If you want this square box to always fill the visible area of the entire viewport (four sides always touch the edges of the screen):
. Box { height100vmax; width 100vmax;}The combination of these units can provide us with a novel and interesting way to use the size of our viewport flexibly.
EX and CH
Units EX and CH, similar to EM and REM, depend on the current font and font size. However, unlike EM and REM, EX and CH are font-based units of measure, depending on the font being set.
The unit ch is usually defined as the width of the number 0. You can find some interesting discussions about it in Eric Meyers's blog, such as setting the width of the letter "N" of a wide font to 40ch, then it can contain 40 letters in another type of font. The traditional use of this unit is mainly in Braille, but beyond that, there must be a place where he can be used.
The unit ex is defined as the height of the lowercase x of the current font or 1/2 em. Many times, it is the middle mark of the font.
x-height; The height of the lower case X (read more aboutthe Anatomy of Web typography)
They have a lot of uses, but most of them are used for fine-tuning typography. For example, the SUP element (the upper-corner label character), can be position:relative;bottom: 1ex; implemented, in the same vein, you can implement a subscript text. The default way to handle a browser is to use superscript and subscript specific vertical alignment rules, but if you want finer granularity to control more precisely, you can do the following:
sup { positionrelative; Bottom 1ex;} Sub { positionrelative; Bottom -1ex;}Summarize
It is important to keep an eye on the development and expansion of CSS so that you can skillfully use the specific tools in your toolbox. You might need to use these complex units to solve a particular problem that you may encounter in the future. Take the time to read new technical specifications, sign up for some nice websites or resources, like cssweekly . Of course don't forget to register for a website like tuts+ to get weekly updates, courses, free tutorials and resources!
Extended Reading
More CSS unit goodness.
Original starting: http://www.ido321.com/1301.html
Next: HTML 5: You must know the Data property
Css:7 a unit you might not know.
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
