总结一些相关页面，字体单位。
一般来说：1em = 1rem = 16 px
px用的比较广泛一些，可以充当更多属性的单位，而em和rem是字体大小的单位，用于充当font-size属性的单位。
1.1 px
常用浏览器默认字体大小16px，
1.2 rem
rem是css3新增的一个相对长度单位，它的出现是为了解决em的缺点。rem出现就可以解决这样的问题，rem只相对于根目录，即HTML元素。所以只要在html标签上设置字体大小，文档中的字体大小都会以此为参照标准，一般用于自适应布局。
1.3 em
em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。
如果没有设置本文尺寸，那就是相对于浏览器默认的字体尺寸，也就是16px。如果没有设置字体尺寸就是1em = 16px。如果使用em的话，有个好的建议，就是将body的font-size设置成62.5%，也就是16px * 62.5% = 10px。这样的话1em = 10px，方便我们计算。
2.1 vw.vh
1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。
2.2 使用vw,vh的用途
1、响应式页面轻松搞定
由于vw，vh的特性，他们能够根据窗口大小来自动调节字体大小，这就能很轻松地完成响应式页面的布局
2、小技巧之响应垂直居中
可以使用vw，vh来实现在页面中响应垂直居中，只需要以下代码
.box {
width: 50vw;
height: 50vh;
margin: 25vh auto;
}
只要设置margin的上下间距，使之heigit + margin-top +margin-bottom = 100 ，width + margin-left + margin-right = 100 ，就能够响应垂直居中
3、模仿bootstrap的栅栏布局
了解过bootstrap的都知道它的栅栏布局，而使用vw，vh就能够轻松实现。
.col-2 {
float: left;
width: 50vw;
}
.col-4 {
float: left;
width: 25vw;
}
.col-5 {
float: left;
width: 20vw;
}
.col-8 {
float: left;
width: 12.5vw;
}
上面是column实例只要在一行中所有的列加起来等于100vw就实现响应式布局
网友评论