Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "css length Units", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "css length Units" article.

Use em or px to set the font size

CSS inherits the units pt (point) and pc (pica) from typesetting. It is used on traditional printers and takes precedence over similar units cm or in. There is a reason not to use unit pt in CSS, you can use any unit you like. We have a good reason to use neither pt nor any other absolute unit (), which is to use em and px.

There are several lines of different thickness. Some or all of them may look clear, but at least the 1px and 2px lines should be clearly visible:

1.jpg

If the first four lines all look the same (or if the 0.5pt line is missing), you may be looking at dots that cannot be displayed less than 1px on your computer monitor. If the thickness of the line increases, you may view this page on a high-quality computer screen or on paper. If 1pt looks thicker than 1.5px, you may have a handheld screen.

The magic unit of CSS: px, which is usually a good unit, especially if the style requires text to align with the image, or just because the 1px width or multiples of 1px make it look clear.

But for font size, it's even better to use em. The idea is (1) not to set the font size of the BODY element (in HTML format), but to use the default size of the device, because this is the size that the reader can comfortably read; (2) the font size of other elements em:H1 {font-size:2.5em} makes H1 2 times the size of the normal text font.

The only place you can use pt (or cm or in) to set the font size is to print in the stylesheet if you need to make sure the printed font is fully of a certain size. But even using the default font size is usually better.

Because, px units can prevent you from knowing the resolution of the device. Whether the output is 96dpiMagne 100dpiMagne 220dpi or 1800dpi, it is expressed as an integer px length, which always looks good and very similar on all devices. But what if you want to know the resolution of the device, for example, whether it is safe to use a 0.5px line? The answer is to check the resolution through media inquiries. Explaining media queries is beyond the scope of this article, but this is a small example:

Div.mybox {

Border:2pxsolid

}

@ media (min-resolution:2dppx) {

/ * 2 or more media per px * /

Div.mybox {

Border:1.5pxsolid

}

}

Second, the new unit of css: rem

To make it easier to write style rules that depend only on the default font size, CSS has had a new unit since 2013: rem. Rem (for "rootem") is the font size of the document root element. Unlike the em element, rem is immutable throughout the document. For example, provide the same left margin for p and H2 elements and compare stylesheets prior to 2013:

P {margin-left:1em}

H2 {font-size:3em;margin-left:0.333em}

New version:

P {margin-left:1rem}

H2 {font-size:3em;margin-left:1rem}

Css also has some other new units that can specify the size relative to the reader window, which is vw and vh. The vw is the width of the window, the width of the window is the width of the window, and the height of the window is the height of the window. And vmin, which stands for the smallest of vw and vh. Vmax, which represents the largest of vw and vh.

Because they are so novel, they can't be used anywhere. However, by the beginning of 2015, some browsers could already support them.

The above is about the content of this article on "what are the css length units?". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.