css长度单位有哪些

这篇“CSS长度单位有哪些”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“css长度单位有哪些”文章吧。

　　一、使用em或px来设置字体的大小

　　CSS从排版里继承了单位pt（point）和pc（pica）。传统打印机上使用，并优先于类似的单位cm或in。在CSS中有理由不使用单位pt，可以使用你喜欢的任何单位。我们一个很好的理由使用既不pt也没有任何其他绝对单位（），那就是使用em和px。

　　这里有几行不同的厚度。它们中的一些或全部可能看起来很清晰，但至少1px和2px线应该清晰可见：

　　1.jpg

　　如果前四行看起来都相同（或者如果缺少0.5pt线），你可能正在计算机显示器上查看无法显示小于1px的点。如果线条的厚度增加，你可能会在高质量的计算机屏幕或纸张上查看此页面。如果1pt看起来比1.5px厚，你可能有一个手持屏幕。

　　CSS的神奇单位：px，通常是一个很好的单位，特别是如果样式需要文本与图像对齐，或者只是因为1px宽或1px的倍数保证看起来很清晰。

　　但对于字体大小，它甚至更好用em。这个想法是（1）不设置BODY元素的字体大小（用html格式），而是使用设备的默认大小，因为这是读者可以舒适阅读的大小;（2）表示其他元素的字体大小em：H1{font-size:2.5em}使H1为普通正文字体的2½倍。

　　在这里你可以使用的唯一的地方pt（或cm或in）用于设置字体大小是在样式表打印，如果你需要确保印刷字体是完全具有一定规模。但即使使用默认字体大小通常更好。

　　因为，px单位可以防止你知道设备的分辨率。无论输出是96dpi，100dpi，220dpi还是1800dpi，它都整数px长度来表示，总是看起来很好并且在所有设备上非常相似。但是，如果你想知道设备的分辨率，例如，知道使用0.5px线是否安全，该怎么办？答案是通过媒体查询检查分辨率。解释媒体查询超出了本文的范围，但这是一个小例子：

　　div.mybox{

　　border：2pxsolid;

　　}

　　@media（min-resolution：2dppx）{

　　div.mybox{

　　border：1.5pxsolid;

　　}

　　}

　　二、css的新增单位：rem

　　为了更容易编写仅依赖于默认字体大小的样式规则，CSS自2013年起就有了一个新的单位：rem。rem（对于“rootem”）是文档根元素的字体大小。与em元素的区别在于，rem在整个文档中是不变的。例如，为p和h2元素提供相同的左边距，比较2013年之前的样式表：

　　p{margin-left：1em}

　　h2{font-size：3em;margin-left：0.333em}

　　新版本：

　　p{margin-left：1rem}

　　h2{font-size：3em;margin-left：1rem}

　　css还有其他一些新单位，可以指定相对于阅读器窗口的大小，这就是vw和vh。vw是窗口宽度的1/100，vh是窗口高度的1/100。还有vmin，代表vw和vh中最小的。vmax，代表vw和vh中最大的。

　　因为它们是如此新颖，它们还没有办法在任何地方使用。但是，截至2015年初，一些浏览器已经可以支持它们了。

以上就是关于“css长度单位有哪些”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网JavaScript频道。