流式布局rem vm/vh px em的区别
- rem -
rem是相对于根元素 html,这样就意味着,我们只需要在根元素确定一个font-size字号,则可以来算出元素的宽高 - px - px意为像素 , 是设备或者图片最小的一个点,比如常常听到的电脑像素是1920x1080的,表示的是水平方向是1920个像素点,垂直方向是1080个像素点。是我们网页设计常用的单位,也是基本单位。通过px可以设置固定的布局或者元素大小,缺点是没有弹性。
- em -
参考物是父元素的font-size,具有继承的特点。如果自身定义了font-size按自身的font-size来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。 特点是
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
- vw/vh -
vw view width的简写,是指可视窗口的宽度。假如可视区域宽度是1920px的话。那1vw = 1920px/100 = 19.2px - vh view height的简写,是指可视窗口的高度。假如可视区域宽度是1080px的话。那1vh = 1080px/100 = 10.8px - vm - 相对于视口的宽度或高度中较小的那个。最小的那个被均分为100单位的 vm
- 例如: 浏览器高度900px,宽度1200px,取最小的浏览器高度,1vm = 900px / 100 = 9px。