我们对单位很熟悉，比如说，千克，千米，米等，这些就是绝对单位，我们又有听到太阳的质量等于33个地球，这个就是相对单位。在CSS中，单位也可以分为这两类。
绝对单位
| 单位 | 描述 |
|---|---|
| cm | 厘米 |
| mm | 毫米 |
| q | 1/4毫米 |
| in | 英寸 |
| pt | 1/72 英寸 |
| pc | 相当于我国新四号铅字的尺寸 |
相对单位
相对单位又通过“被参考物”分为相对字体与相对视口。
相对字体
| 单位 | 描述 |
|---|---|
| em | 相对于当前元素的font-size的倍数 |
| rem | 相对于根元素的font-size的倍数 |
| ch | 数字"0"的宽度的倍数 |
| ex | 字母"x"的高度的倍数 |
相对视口
| 单位 | 描述 |
|---|---|
| vw | 相对于视口的宽度，均分为100vw |
| vh | 相对于视口的高度，均分为100vh |
| vmax | 相对于视口的宽高中较大者，均分为100vmax |
| vmin | 相对于视口的宽高中较小者，均分为100vmin |
大部分浏览器的默认
font-size都是16px。1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
px
px（Pixel）像素相对长度单位，不过也有的人认为是绝对单位。CSS里面的px不等于物理像素CSS中的像素，只是一个抽象的单位或逻辑像素，也可以理解为直觉像素，在不同的设备或不同的环境中，CSS中的1px所展示的实际物理像素是不同的。
1px 边框
产生原因
我们做移动端页面时一般都会设置meta标签viewport的content=“width=device-width”，把html视窗宽度大小设置等于设备宽度的大小。假设设计图是750px的二倍图，在750px上设计了1px的边框，要拿到375px宽度的手机来显示，就相当于整体设计图缩小了一倍，所以750px设计图里的1px边框在375px手机设备上要以0.5px来呈现才符合预期效果，然而css里最低只支持1px大小，不足1px就以1px显示，所以你看到的就显得边框较粗，实际上只是设计图整体缩小了，而1px的边框没有跟着缩小导致的。
解决方案
媒体查询0.5px适配
在IOS8+以上的苹果机型都已经支持0.5px了，可以借助媒体查询来处理。
.border {
border: 1px solid black;
}
@media (-webkit-min-device-pixel-ratio: 2) {
.border {
border-width: 0.5px;
}
}
IOS7及以下和Android等其他系统里，0.5px将会被显示为0px。
CSS3 background渐变
.border {
background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
linear-gradient(270deg, red, red 50%, transparent 50%),
linear-gradient(0deg, red, red 50%, transparent 50%),
linear-gradient(90deg, red, red 50%, transparent 50%);
background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top;
padding: 10px;
}
因为每个边框都是线性渐变颜色实现，因此无法实现圆角。
伪类+transform
把原先元素的border去掉，然后利用:before或者:after重做border，并 transform的scale缩小一半，原先的元素相对定位，新做的border绝对定位。
.radius-border{
position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2){
.radius-border:before{
content: "";
pointer-events: none;
box-sizing: border-box;
position: absolute;
width: 200%;
height: 200%;
left: 0;
top: 0;
border-radius: 8px;
border:1px solid #000；
-webkit-transform(scale(0.5));
-webkit-transform-origin: 0 0;
transform(scale(0.5));
transform-origin: 0 0;
}
}
比较常用方法，但是代码冗长。个人比较常用伪类+transform的方式。
参考文献
