前言

 在浏览器里面或者说是在前端里面, 单位分为很多, 最常见的有三种 分别是

ps : 单位为像素,相对长度单位,像素(px)是相对于显示器屏幕

em: 单位名称为相对长度单位, 相当于当前对象文本的字体尺寸,(挺好用的)

pt: 单位名称为点(Point),绝对长度单位一般老版本的table使用长度大小单位(现在基本看不见)

rem: CSS3 新增的一个相对单位  ;单位是相对于根元素( htm的font-size); 所以只要设置根元素的font-size的大小,让其他的元素使用转换后的rem单位即可; 实现自适应效果;

rpx: 这个单位是微信提出来的,所以只能在rpx 中使用;1rpx = 0.5px ; 也是可以实现自适应效果 ;

vw 和 vh: c3中提出的一种计量单位; 是相对于视口的宽, 高度;视口被均分为100单位的vw,vh; 有部分低版本兼容性问题

在一些场景中会使用自适应来进行布局, 采用rem 的话,可以使用 淘宝团队提供的js插件

flexible.js 

github地址  https://github.com/amfe/lib-flexible

可以采用cdn引入或者直接其他方法

在html 文件中引入, 

首先需要去到 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

然后在css中,使用less(可以下载插件转换). flexible.js中默认的单位是750px的设计图稿所以在使用的使用需要转换一下单位 比如: height : 100rem / 75 ;

自动转换可以下载vscode 的插件 cssrem ; 插件默认计算值为16，也就是以16px为计算单位，实际情况与默认值不同。需要进入首选项 ===>设置，搜索“cssrem”;然后点击编图案,根据需求更改计算基准字体大小;