Browser compatibility is getting better and better, mobile terminal is basically a uniform webKit, often use CSS different size/length units, here to do a sort of arrangement.

An overview of

Absolute unit

  • P: Pixel pixels
  • Pt: Points pounds
  • PC: Picas send CARDS
  • In: Inches Inches
  • Mm: Millimeter mm
  • Cm: Centimeter cm
  • Q: It’s a Quarter millimeters

Relative unit

  • The percentage % :
  • Em: Element Meter calculates dimensions based on document fonts
  • Rem: Root Element Meter calculates dimensions based on the Root document (Body/HTML) font
  • Ex: height of document character “x”
  • Ch: the width of the document number “0”
  • Vh: View height Height of the viewing range
  • Vw: View width View width
  • Vmin: View min The smaller size of the width or height of the visible range
  • Vmax: View Max The larger size of the width or height of the visible range

operation

  • Calc: Four operations

Example:

h1 {
    width: calc(100% - 10px + 2rem)
}Copy the code

Unit scale

1in = 2.54cm = 25.4mm = 101.6q = 72pt = 6pc = 96px

detailed

Absolute unit

Px-pixel Indicates the Pixel

Pixel px relative to the device display screen resolution.

div { font-size: 12px }
p { text-indent: 24px }Copy the code

Pt Points pounds

1 pt = 1/72 inch

div { font-size: 10pt }
p { height: 100pt }Copy the code

PC Picas send CARDS

Twelve movable type (used in printing), equivalent to the size of China’s new 4 type.

div { font-size: 10pc }
p { height: 10pc }Copy the code

In Inches Inches

div { font-size: 10in }
p { height: 10in }Copy the code

Mm Millimeter mm

div { font-size: 10mm }
p { height: 10mm }Copy the code

Cm Centimeter cm

div { font-size: 10cm }
p { height: 10cm }Copy the code

Q Quarter millimeters

div { font-size: 20q }
p { height: 100q }Copy the code

Relative unit

% %

Width relative to the parent element

<body>
    <div class="parent">
        <div class="children"></div>
    </div>
</body>

<style>
.parent { width: 100px }
.children { width: 66.6% }
/* Children's width is 66.6px */
</style>Copy the code

The EM Element Meter calculates dimensions from documents

If the font size is not specified, it inherits from the parent element, relative to the font size of the text in the current document object, and so on, up to body, which is the browser default if not specified.

<body>
    <div class="element"></div>
</body>

<style>
body {
    font-size: 14px;
}
.element {
    font-size: 16px;
    width: 2em;
    /* 2em === 32px */
}
</style>Copy the code

The REM Root Element Meter calculates dimensions based on the Root document (Body/HTML) font

If the font size is not specified, it is inherited as the browser default font size relative to the font size of the text in the root document object (body/ HTML).

<body>
    <div class="element"></div>
</body>

<style>
body {
    font-size: 14px;
}
.element {
    font-size: 16px;
    width: 2rem;
    /* 2rem === 28px */
}
</style>Copy the code

Ex Height of document character “x”

The height relative to the character “x”, usually half the height of the font, or relative to the browser’s default font size if no font size is specified.

As for why x, I have no fucking idea.

<body>
    <div class="x"></div>
</body>

<style>
.x {
    height: 1ex;
    overflow: hidden;
    background: #aaa;
}
</style>Copy the code

Ch Specifies the width of the document number “0”

As above, the width relative to the number “0”.

<body>
    <h1>Define a container exactly wide enough to hold 10 zeros:</h1>
    <div class="0">0000000000</div>
</body>

<style>
. 0 {
    width: 10ch;
    overflow: hidden;
    background: #ccc;
}
</style>Copy the code

A picture to explain:

Vh View height/VW View Width – Visible range

The viewable range is divided into 100 vh/vw units relative to the height and width of the viewable range; The visible range is the screen visible range, not the parent element. The percentage is the height and width relative to the nearest parent element that contains it.

Assuming the device has a viewable range of 900px height and 750px width, then 1 vh = 900px/100 = 9px and 1vw = 750px/100 = 7.5px.

<body>
    <h1>article title</h1>
    <div class="element"></div>
    <div class="full-height"></div>
</body>

<style>
.element {
    width: 50vw;
    height: 80vh;
    /* If the screen height is 1000px, the element height is 800px, and so is vw */
}
.full-height {
    height: 100vh;
    /* Easily implements elements at the same height as the screen */
}
h1 {
    width: 100vw;
    /* Set a screen-width title, and the font size of the title will automatically scale according to the browser width to synchronize the font size with the viewPort size. * /
}
</style>Copy the code

Vmin/vmax The smaller/larger size of the width or height of the visual range

Assuming the width of the browser is set to 1200px and the height is set to 800px, 1vmax = 1200/100px = 12px and 1vmin = 800/100px = 8px.

If the width is set to 600px and the height is set to 1080px, 1vmin = 6px and 1vmax = 10.8px.

Suppose you need to make an element always visible on the screen:

.box { 
    height: 100vmin; 
    width: 100vmin;
}Copy the code

Suppose you want this element to always cover the entire visible area of the viewport:

.box { 
    height: 100vmax; 
    width: 100vmax;
}Copy the code

conclusion

Em, rem is our most commonly used to units in the process of production, can use its cooperate with media queries to change the body font size to achieve responsive design, vh, vw, vmin, vmax response size can easily help us to control, but the actual control may not be as the former, according to our business needs to practice!

Surmon. me/article/58

After the