CSS长度单位合集

绝对长度单位

单位英文全称中文全称转换举例pcPicas派卡1pc = 16pxfont-size:1pc;ptPoints点1pt = 1.33pxfont-size:1pt;inInches英寸1in = 96pxfont-size:1in;qquarter-millimeters1/4毫米1q = 1/4mm = 0.945pxfont-size: 20q;mmMillimeters毫米1mm = 0.1cm = 3.78pxfont-size: 10mm;cmCentimeters厘米1cm = 10mm = 37.8pxfont-size: 1cm;

相对长度单位

单位英文全称中文全称举例说明pxPixels像素font-size:12px;不同屏幕像素大小不同vmin//font-size: 8vm;/*IE9*/、font-size: 5vmin;/*其他浏览器*/，视口的宽度是医院保洁员岗位职责300mm，高度护理实习总结是200mm，h1元素的字号将为16mm，即(8×200)/100，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vminvmax//同vmin，取较大的那个font-size:12vmax;相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmaxvh//font-size: 8vh;视口的高度是200冬天的美mm，则字号将为16mm，即(8×200)/100相对于视口的高度。视口被均分为100单位的vhvw//font-size:8vw;视口的宽度是200mm，那么元素的字号将为16mm，即(8×200)/100，相对于视口的宽度，视口被均分为100单位的vw。(vw = px/屏幕的宽度*100)。(px = vw*屏幕的宽度/100)。获取屏幕的宽度：document.documentElement.clientWidthem//父元素div{fontSize:16px;}子元素p{font-size:0.75em;}则=>“0.75 X 16px = 12px”,子元素为12px此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位,为了简化font-size的换算，可以将body{Font-size=62.5%;}， 这样10px=1职工养老保险计算emrem//根元素html{fontSize:16px;}子元素p{font-size:0.75rem;}则=>“0.75 X 16px = 12px”,子元素为12px相对于根元素(即html元素)font-size计算值的倍数，为了简化font-size的换算，可以将body{Font-size=62.5%;}， 这样10px=1rem. rem=>px: px=根元素字体大小* rem 值ex//font-size:1ex;相对于字符小写“x”的高度。通常为字体高度的一半ch//font-size:1ch;相对于数字“0”的宽度

rem与em

rem使用：一切可扩展都应该使用 rem 单位通常不使用 em 单位控制字体大小em的使用：设计组件
按钮(用在按钮里面的字体图标，字体图标的大小跟按钮的文本大小有关)
菜单(信而见疑使用 em 字体大小的下拉菜单，第二个级别的菜单项文本大小取决于第一级字体大小,使用em 值设置导航菜单项的padding、 margin，line-height等值,他们使用的元素的字体大小应设置对rem单位，以保留的可扩展性)

4.始终使用 rem 单位做媒体查询

不要使用 em 或 rem :

1.布局中的列宽通常应该是 %，因此他们可以流畅适应无法预知大小的视区。 然而单一列一般仍然应使用 rem 值来设置最大宽度

.container {     width: 100%;    max-width: 75rem;}

这保持列的灵活，可扩展。又能防止变得太宽了

总结：

rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。em 单位基于使用他们的元素的字体大小。rem 单位基于 html 元素的字体大小。em 单位可能受任何继承的父元素字体大小影响rem 单位可以从浏览器字体设置中继承字体大小。使用 em 单位应根据组件的字体大小而不是根元素的字体大小。在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。使用rem单位，除非你确定你需要 em 单位，包括对字体大小。媒体查询中使用 rem 单位不要在多列布局中使用 em 或 rem -改用 %。

本文地址：https://blog.csdn.net/Yueqin0512/article/details/109385833