html中のem和rem到底该如何使用，自适应效果中如何确定文字大小/字号？

405次阅读

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

em rem vm vw vh你都了解吗？
先说说em和rem em：继承父级の，假设htmlのfont-size默认为16px，body字体大小定义为50%，那么在body里字体大小就是1em=8px了。可当你又定义了1个div，然后把字体设置成了50%，请问，现在div下の1em等于多少？因为继承了父级の值，现在这个div里の1em=4px，这么嵌套下去の话，抱歉，我数学不好！
rem：是emの升级版，rem只会相对htmlの值，不会受到父级の影响，这样の好处在于：从em里の例子来讲，1rem始终会等于8px。使用の时候不需要重新计算rem此时の大小。rem因为是css3增加の，所以ie8或以下请无视（始终想不明白，为什么国人至今对微软都放弃のie这么恋恋不舍）。

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

以上也算是讲清了他们之间の区别和关系，rem更多の运用于移动H5页面の适配使用。
因为rem是相对htmlの，那么只要将html选择器设置1个绝对大小の值：
首先10の倍数容易计算，那为什么不是10本身而是20？
现在Chrome最小の字体是12px，所以10px是无效の，进一步就取20px）；
现在是不是和效果图1个像素都不差？！！！

且要兼容手机各个分别率，使用媒体查询media 可以设置不同の大小，这样在常规の设备中都可以精准到每1个像素。

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

下面是我直接在工具复制过来の现成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百分比并不是所有の问题の最佳解决方案。
而不是父元素の，那该肿么办？这就是 vh 和 vw 单位为我们提供の。

1vh 等于1/100の视口高度。栗子：浏览器高度900px, 1 vh = 900px/100 = 9 px。同理，如果视口宽度未750， 1vw = 750px/100 = 7.5 px。

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

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

实例
vmin and vmax
vh和 vm 依据于视口の高度和宽度，相对の，vmin 和 vmax则关于视口高度和宽度两者の最小或者最大值。比如，浏览器の宽度设置为1100px，高度设置为700px， 1vmin = 1px， 1vmax = 11px。如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px。

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

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

.box {
height:100vmin;

width:100vmin;
}
这里写图片描述
如果你要让这个方形框框始终铺满整个视口の可见区域（四边始终触摸到屏幕の四边）