以前固定宽度布局的时候，几乎都是固定像素，宽度固定，间距固定，文字大小更是固定像素。

可在流布局和响应式布局的催化下，固定宽度，固定大小的布局已经不能满足我们多元化的显示设备，pc端，平板端，手机端，各种尺寸的设备，如果都要重新做一个网页的话，我觉得那不是我们前端人的工作态度，毕竟学会如何偷懒是人的共性，催化了多少高科技玩意呢。

所以，固定宽度布局的时代已经过去，流布局结合media queries实现响应式布局才能一劳永逸！当然css3新增的多列布局和flex弹性布局，还有更牛逼的grid网格布局，啊啊啊……，要学的东西太多啦。

所以，现在请你放弃px，投入%、em、rem等单位的怀抱吧。

让网页随着设备的宽度变化而变化才是做一个页面，适用不同设备宽度的王道。

如果要讲清楚这些变化，估计我要写好几篇文章， 弄好几个案例，可是我的视频还没有录完，我得赶紧加班弄去！

所以，今天只推荐一个神奇，比计算器好用，让你在px和em之间自由切换！

现在浏览器默认的文字大小是16px，所以默认16px=1em，但是如果你自己为body标签强制设置了字体大小，比如为12px，那么此时你的网页就是12px=1em了。

使劲戳下面的链接：

http://pxtoem.com/

以后可以不用一边做网页一边拿着计算器了。