web开发中的长度单位小结

1、长度单位包括哪些？

长度单位：例如，厘米、毫米、英寸。还有像素（px），元素的字体高度（em）、字母x的高度（ex）、百分比（%）等这些单位，可以将它们归结为两大类别：
第一类，就是绝对长度单位；
第二类，就是相对长度单位。

2、绝对长度单位

绝对长度单位，它就是一个固定的值，一个真实的物理值，它不随设备或者受别的因素影响的长度单位。
具体的绝对长度单位主要包括以下几个：
1）、cm，厘米：一个长度计量单位，1m=100cm。
2）、mm，毫米：与厘米一样，也是一个长度计量单位，1cm=10mm；毫米同时还是降雨量的计量单位。
3）、in，英寸：这个是美国尺子上都有的单位，1英寸=2.54厘米，12英寸=1英寸。
4）、pt，点（points）：一个印刷度量单位，1英寸相当于72点，例如，将元素p设置为24点的话，就是1英寸的三分之一（1/3）；
5）、pc，派卡（Picas）：一个印刷术语，1派卡相当于12点，6派卡相当于1英寸。

当然，这些单位都是绝对长度单位，在我们的web开发中，运用比较少，主要是因为绝对长度单位不利于页面屏幕的渲染，他们更多的是被用在印刷、打印等方向。

3、相对长度单位

相对长度单位，例如，px，em，ex，rem；这些都是相对长度单位。
1）px，像素：px是相对于显示器屏幕分辨率而言。用px设置字体大小时，可能比较稳定和精确。但是这种方法存在一些问题，例如：IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；Firefox能够调整px和em，rem，但是96%以上的中国网民还是喜欢使用IE浏览器。为了保证用户体验和web页面效果，所以在web开发中还引入了“em”这个长度单位。

2）em，元素的字体高度：em是相对于父元素的属性值而计算的，所以em是非具体的数值。它需要一个参考点，一般都是以的“font-size”为基准。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合：1em= 16px。有时为简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%,此时1em=16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说换算时只需将原有px数值除以10，然后换上em作为单位即可。 em 的值并不是固定的；em的值会继承父级元素的字体大小。

3）ex，所有字体元素中小写x的高度：这个主要与字体有关，不同的字体，即使设置了相同的字体大小，但是ex的值也有可能不同，主要是因为字体的x高度可能不同。不过这个在我们实际开发中运用比较少，一般设置em后，ex就会默认为em的一半，也有为计算方便，将1ex假设等于0.5em,原因在于，大多数的字体的小写字母都是相应大写字母高度的一半。

4）rem，元素字体高度：与em相比较多了一个"r"，是CSS3新增的一个相对单位，是root em，简写rem，这个单位与em的区别在于，使用rem为元素设定字体大小时，rem相对的只是HTML根元素。通过rem，既可以做到只修改根元素就可以成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。 目前，除IE9以下的版本外，所有浏览器均已支持rem。

另外，我们在开发中还需要注意两点：

第一，若rem没有在根元素（html字体）指定参照值，那浏览器默认1 rem就是16px,若rem有指定值，则1rem就是等于指定值 。
第二，html设置为62.5%或者10px时会失效，是因为小于12px或者75%的字体大小不支持换算。这可能与有些浏览器不支持12px以下的大小有关。所以，使用rem单位，html的字体默认字体大小必须设置为12px或以上。若小于12px则浏览器换算时自动默认字体为12px。

web前端常用长度单位（px，em，rem，pt）

1、px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

2、em是相对长度单位。

相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.5em, 1em,2em等，通常1em=16px，为了简化font -size的换算，可以在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。 

em有如下特点：

 因为“em”就是一个相对值，em的值并不是固定的；
 em会继续父级元素的字体大小。
 计算公式：1 ÷ 父元素的字体大小 × 需要转换的像素值 = em值，这样的情况下“1.4em”可以            是“14px”,也可以是“20px”，或者说是“24px”。
 rem（root em，根em）：是CSS3新增的一个相对单位，相对的只是HTML根元素，可以只修改根元素就可以成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。兼容性IE9+都可以兼容，对于不兼容的浏览器写一个绝对单位的声明就可以了。

3、pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)

  px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
 em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.5em, 1em,2em等，通常1em=16px，为了简化font -size的换算，可以在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。 
   em有如下特点：
 因为“em”就是一个相对值，em的值并不是固定的；
 em会继续父级元素的字体大小。
 计算公式：1 ÷ 父元素的字体大小 × 需要转换的像素值 = em值，这样的情况下“1.4em”可以            是“14px”,也可以是“20px”，或者说是“24px”。
 rem（root em，根em）：是CSS3新增的一个相对单位，相对的只是HTML根元素，可以只修改根元素就可以成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。兼容性IE9+都可以兼容，对于不兼容的浏览器写一个绝对单位的声明就可以了。  

到此这篇关于web开发中的长度单位小结的文章就介绍到这了,更多相关web开发长度单位内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

最新评论