CSS units |
您所在的位置：网站首页 › px转vh › CSS units |
CSS units
|
In this article, we will see how to set the CSS units in different ways. % – The % unit is used to set the font-size relative to the current font-size. em – It is used to set the relative size. It is relative to the font-size of the element. Note: Here 2em meaning 2times the size of current font. rem – Relative to the browser base font-size. px – It defines the font-size in terms of pixels. (96px = 1in)vh – Relative to 1% of the height of the viewport. vw – Relative to 1% of the width of the viewport.Example 1: The pixel unit is an absolute unit to set the width i.e. it is always the same. A percentage unit is based on a relative unit i.e. it is based on its parent size. HTML .box { background: red; border: 1px solid black; margin: 10px; } .parent { background: white; border: 1px solid black; } .fifty-percent { width: 50%; } .one-hundred { width: 100px; } .parent { width: 250px; ; } Output-1 50% 100px Output-2 50% 100pxOutput :
Example 2: Another type of relative width is called view width (vw) and view height (vh). 1vw equals one percent of the entire screen size so 100 vw would take up the entire width and 50vw obviously would take up half the width but the important thing about vw versus percentages is that viewport units are based on the entire screen size while rectangles are relative to their parent. HTML Page Title .box { background: red; border: 1px solid black; margin: 10px; } .parent { background: white; border: 1px solid black; } .fifty-percent { width: 50%; } .fifty-vw { width: 50vw; } .twenty-five-vh { height: 25vh; } .parent { width: 100px; ; } Output-1 50% 50vw 25vh Output-2 50% 50vw 25vhOutput:
Example 3: Both REM units and EM units are relative but instead of being relative to things around them such as the width of their parents or the height of the parents they’re actually relative to the font size. HTML Page Title .parent { background: white; border: 1px solid black; } .one-rem { font-size: 1rem; } .one-em { font-size: 1em; } .two-rem { font-size: 2rem; } .two-em { font-size: 2em; } .parent { font-size: 30px; } Output-1 1rem 1em 2rem 2em Output-2 1rem 1em 2rem 2emOutput:
|
【本文地址】