响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh)
单位
物理像素：设备屏幕实际拥有的像素点。比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6总共有750*1334个物理像素。
逻辑像素：也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在 CSS/JS 代码里的像素点数。每英寸的像素的数量保持在96左右，因此设置为12px的元素，无论使用什么样的设备查看网页，字体的大小始终为1/8英寸。iPhone 6总共有375*667个逻辑像素。
px 绝对尺寸，逻辑像素
pt 全称 point，1/72英寸，用于印刷业，也称“绝对长度”
em 相对尺寸，相对于当前对象内文本的 font-size
rem 相对尺寸，可理解为 “root em”, 其参考对象为根元 <html> 的 font-size
dp = px × (目标设备 dpi 分辨率 / 160)
rpx = px × (目标设备宽 px 值 / 750)
dp 是以屏幕分辨率为基准的动态单位，而 rpx 是以长度为基准的动态单位，两者是不能直接进行互换的。
如果将微信小程序放到平板电脑上运行，屏幕的宽度 px 值有可能会变化（横竖屏、分屏模式等等），这时候，再以宽度为基准，就会出现元素显示不正确的问题，从这一点可以看出，微信团队目前并不希望将小程序扩展到手机以外的设备中。
1px 边框
CSS 中定义的 1px 边框实际有多个物理像素，如果想要一个物理像素显示，使用 transform: scale(0.5) 或 transform: scale(0.33)，只剩一个点了。