orangeyyy
2/28/2018 - 6:57 AM
浏览器中的单位
pt && px
pt
pt(point)是印刷行业常用的单位，等于1/72英寸，表示绝对长度。
px
px(pixel)指的是像素，是屏幕上显示数据的最基本的点，表示相对大小。不同分辨率下相同的像素值展示会有些不同
rem && em
rem和em都属于相对尺寸单位，浏览器会根据不同的字体大小转换成对应的像素值。
rem
rem转化为像素大小取决于页根元素的字体大小，即html元素的字体大小，根元素字体大小乘以rem值可以得到最终像素值；
em
em转化为像素大小取决于使用em单位的元素的字体大小，当前元素字体大小乘以em值可以得到最终像素值；
需要注意的是，很多文章认为em应该相对于父容器的字体大小，这是一种误解，事实上，根据W3标准，它们是相对于使用em单位的元素的字体大小，父元素的字体大小可以影响 em 值，但这种情况的发生，纯粹是因为继承。
浏览器默认字体大小为16px，因此在不设置任何font-size的情况1rem=1em=16px；
使用 em 和 rem 单位可以让我们的设计更加灵活，能够控制元素整体放大缩小，而不是固定大小。 我们可以使用这种灵活性，使我们在开发期间，能更加快速灵活的调整，允许浏览器用户调整浏览器大小来达到最佳体验。
vh && vw
响应式web设计离不开百分比。但是，CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口（viewpoint）的宽度或者高度，而不是父元素的，那该肿么办？ 这就是 vh 和 vw 单位为我们提供的。
1vh 等于1/100的视口高度。栗子：浏览器高度900px, 1 vh = 900px/100 = 9 px。同理，如果视口宽度未750， 1vw = 750px/100 = 7.5 px。
vmin && vmax
vh和 vw 依据于视口的高度和宽度，相对的，vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值。比如，浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 7px， 1vmax = 11px。如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px。