px单位
px是css中常见的单位px:pixel，像素，屏幕上显示的最小单位，用于网页设计，直观方便。rpx单位
rpx是小程序常用的单位rpx和px的换算：1px=2rpxem单位
em单位大小CSS 3中新增的一种相对长度单位，首先它会找自身有没有font-size,没有的话找父元素的字体大小（font-size），一直往上寻找，直到找到为止<!DOCTYPE html><html lang="en"><body><div><p></p></div></body></html><style>div{font-size:12px;}p{/* div的字体大小×长度=12px*10em=120px */font-size:20px;width:10em; //200pxheight:10em; }</style>
<!DOCTYPE html><html lang="en"><body><div><p></p></div></body></html><style>div{font-size:12px;}p{/*p没有设置字体大小，找到的是div的字体大小 */width:10em; //120pxheight:10em; }</style>
无论是字体大小还是宽度高度用了em单位，那么其px大小等于往上找到的字体大小乘于自身的em大小。比如html->div->p，p的大小如果div没有设置字体大小，那么就找html的字体大小，如果没有就获取html的默认字体大小。（默认字体根据浏览器的不同或有变化）这样就实现了随着字体大小的变化，响应式地改变大小，适应屏幕大小
rem单位
rem是CSS 3中新增的一种相对长度单位。当使用rem单位时，根节点< html>的字体大小(font-size)决定了rem的尺寸。与em单位相比，rem单位的优势在于，只通过修改< html>的文字大小，就可以改变整个页面中的元素大小，使用起来更加方便。即使html没有设置字体大小，也不会获取父元素的字体大小，而是获取html的字体大小。html {font-size: 14px;}div {font-size: 12px;}div > p {width: 10rem; /* 结果为140px */height: 10rem; /* 结果为140px */}
