欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS 中常用单位大全

程序员文章站 2022-04-28 11:24:37
...

1. px

px 是图像显示的基本单元，是 viewport 像素，是相对单位。同样都是 1px，在不同设备上的显示有可能是不一样的。

2. rem

rem 是相对于根元素 <html> 的 font-size 来计算的，比如说你设置了1.2rem，根元素的font-size是100px，那么这个元素动态算出来的px数就是120px。不同宽度，设置不同px，这样就可以适配所有宽度的设备了。看一下实际开发中我们动态计算根元素 font-size 的代码：

var  根元素fontsize =  实际设备宽度 / 开发时设备宽度  * 开发时根元素font-size

具体代码是：（假设开发时我们适配的是iphone6，也就是逻辑像素 375px 的设备，我们开发时根元素 font-size 设为了100px）

  document.documentElement.style.fontSize =
 (document.documentElement.offsetWidth / 375) * 100 + 'px' ;

其实我们还可以再除以2，为什么呢，因为我们现在设计稿量出来的是物理像素，iphone6的dpr是2，我们要把量出来的数除以2，就是实际的px，然后再除以100，就是rem，既然每次都要这么做，为什么不在根元素这里把除以2给统一做了，只需要把量出的数只要除以100就是rem了。

3. em

em 是相对于父元素的 font-size 来计算的。

4. vw，vh，vmin，vmax

（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
视窗(Viewport)是你的浏览器实际显示内容的区域（不包括工具栏和按钮）。

（2）具体描述如下：

  • vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
  • vh：视窗高度的百分比
  • vmin：当前 vw 和 vh 中较小的一个值
  • vmax：当前 vw 和 vh 中较大的一个值

（3）vmin、vmax 用处
做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

（4）浏览器兼容性
       （1）桌面 PC
Chrome：自 26 版起就完美支持（2013年2月）
Firefox：自 19 版起就完美支持（2013年1月）
Safari：自 6.1 版起就完美支持（2013年10月）
Opera：自 15 版起就完美支持（2013年7月）
IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）

       （2）移动设备
Android：自 4.4 版起就完美支持（2013年12月）
iOS：自 iOS8 版起就完美支持（2014年9月）

 （5）用途

  • 设置元素的尺寸，字体大小
  • 设置遮罩层的尺寸

5. 百分号 %

% 是相对于父元素的尺寸来计算的。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

上一篇： javax.servlet.jsp.JspException cannot be resolved to a type

下一篇： List错误

推荐阅读