如今手机屏幕繁多，自适应效果中如何确定文字大小/字号？

em rem vm vw vh你都了解吗？

先说说em和rem

em：继承父级的，假设html的font-size默认为16px，body字体大小定义为50%，那么在body里字体大小就是1em=8px了。可当你又定义了一个div，然后把字体设置成了50%，请问，现在div下的1em等于多少？因为继承了父级的值，现在这个div里的1em=4px，这么嵌套下去的话，抱歉，我数学不好！所以rem就出现了。

rem：是em的升级版，rem只会相对html的值，不会受到父级的影响，这样的好处在于：从em里的例子来讲，1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的，所以ie8或以下请无视(始终想不明白，为什么国人至今对微软都放弃的ie这么恋恋不舍)。

具体用法看下图，是不是秒懂？

以上也算是讲清了他们之间的区别和关系，rem更多的运用于移动H5页面的适配使用。

因为rem是相对html的，那么只要将html选择器设置一个绝对大小的值：比如在html选择器设置font-size：20px；那么1rem=20px(解释下为什么是20而不是其他的，首先10的倍数容易计算，那为什么不是10本身而是20？现在Chrome最小的字体是12px，所以10px是无效的，进一步就取20px)；现在是不是和效果图一个像素都不差？！！！

且要兼容手机各个分别率，使用媒体查询media

可以设置不同的大小，这样在常规的设备中都可以精准到每一个像素。

这么换算来换算去好麻烦有木有！！所以发现了下面的换算工具，妈妈再也不用说我数学题不会做了！

下面是我直接在工具复制过来的现成rem换算适配代码↓(设计稿宽度：640，字体值：20)

@media only screen and(max - width: 1080px), only screen and(max

- device - width: 1080px) {

html, body

{

font - size: 16.875px;

}

}

@media only screen and(max - width: 960px), only screen and(max -

device - width: 960px) {

html, body

{

font - size: 15px;

}

}

@media only screen and(max - width: 800px), only screen and(max -

device - width: 800px) {

html, body

{

font - size: 12.5px;

}

}

@media only screen and(max - width: 720px), only screen and(max -

device - width: 720px) {

html, body

{

font - size: 11.25px;

}

}

@media only screen and(max - width: 640px), only screen and(max -

device - width: 640px) {

html, body

{

font - size: 10px;

}

}

@media only screen and(max - width: 600px), only screen and(max -

device - width: 600px) {

html, body

{

font - size: 9.375px;

}

}

@media only screen and(max - width: 540px), only screen and(max -

device - width: 540px) {

html, body

{

font - size: 8.4375px;

}

}

@media only screen and(max - width: 480px), only screen and(max -

device - width: 480px) {

html, body

{

font - size: 7.5px;

}

}

@media only screen and(max - width: 414px), only screen and(max -

device - width: 414px) {

html, body

{

font - size: 6.46875px;

}

}

@media only screen and(max - width: 400px), only screen and(max -

device - width: 400px) {

html, body

{

font - size: 6.25px;

}

}

@media only screen and(max - width: 375px), only screen and(max -

device - width: 375px) {

html, body

{

font - size: 5.859375px;

}

}

@media only screen and(max - width: 360px), only screen and(max -

device - width: 360px) {

html, body

{

font - size: 5.625px;

}

}

@media only screen and(max - width: 320px), only screen and(max -

device - width: 320px) {

html, body

{

font - size: 5px;

}

}

@media only screen and(max - width: 240px), only screen and(max -

device - width: 240px) {

html, body {

font - size: 3.75px;

}

下载地址，离线和在线都有离线版本：https://github.com/leon776/grunt-px2rem

在线版本：http://mxd.tencent.com/wp-content/uploads/2014/11/rem.html

再说vm

适用于网格布局

Rems

不仅仅只是在设置字体大小上很方便。再炒个栗子，你可以用基于html根元素字体大小的rem作为整个网格布局或者UI库的大小单位，然后在其他特定的地方用em单位。这样将会给你带来更多的字体大小和伸缩的可控性，

概念上来说，这个方法的思想就是让你的界面根据你的内容进行缩放。但是，这样做并不是对所有的情况都有意义。

vh and vw

响应式web设计离不开百分比。但是，CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口(viewpoint)的宽度或者高度，而不是父元素的，那该肿么办？这就是 vh 和 vw 单位为我们提供的。

1vh 等于1/100的视口高度。栗子：浏览器高度900px,

1 vh = 900px/100 = 9

px。同理，如果视口宽度未750， 1vw = 750px/100 = 7.5 px。

可以想象到的，他们有很多很多的用途。比如，我们用很简单的方法只用一行CSS代码就实现同屏幕等高的框。

.slide {

height: 100vh;

}

假设你要来一个和屏幕同宽的标题，你只要设置这个标题的font-size的单位为vm，那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果，有木有？！

实例

vmin and vmax

vh和 vm 依据于视口的高度和宽度，相对的，vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值。比如，浏览器的宽度设置为1100px，高度设置为700px， 1vmin =

1px， 1vmax =

11px。如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px。

那么问题来了，我们应该在什么场景下使用这两个单位呢？

假设有一个元素，你需要让它始终在屏幕上可见。只要对其高度和宽度使用vmin单位，并赋予其低于100的值就可以做到了。再来个栗子，可以这样定义一个至少有两个边触摸到屏幕的方形：

.box {

height:100vmin;

width:100vmin;

}

如果你要让这个方形框框始终铺满整个视口的可见区域(四边始终触摸到屏幕的四边)

.box {

height: 100vmax;

width: 100vmax;

}

结合使用这些单位可以为我们提供一个新颖有意思的方式来灵活地利用我们视口的大小。