BODY background=自适应大小_vue中怎样使用rem布局解析+大屏自适应

公司内部一直有大屏的需求，也一直再做，中途也踩了一些坑，但是没有认真的来总结下。

首先项目中，做过移动端的适配，也有现在的大屏需求，中间都离不开不一个单位rem，自适应看起来就很麻烦，不过无惧困难，困难才会看到你说，哟，厉害了，我闪~，下面慢慢聊来。

浅析rem

首先rem是css单位，相比于px固定的像素单位，rem更加的灵活，还有现在也比较好的vm。如果从未了解过，可以先过过眼

rem自适应。CSS3的REM设置字体大小

font size of the root element.

简单来说，rem就是根据html元素的字体大小来计算单位的。我们的需求就是说，根据不同的分辨率，我们元素的大小能够有所对应的变化，在视觉上能够做到很舒服的效果。想想我们在做pc端的时候，一般都是中间固定比如1200px像素，然后最小1200px，两边留白，这样我们无论放大缩小都不会影响效果。但是现在移动端各种屏幕的出现，适应性就更加的强烈。根据分辨率的不同让html的字体大小变化，我们在页面中写rem，由于rem是相对于根元素字体大小来计算的，那么就可以实现自适应的效果。

移动端自适应——手淘flexible

熟悉移动端的自适应方案的朋友对 rem 适应方案，肯定不陌生，最出名的就是阿里的 lib-flexible 方案。

原理：flexible就是根据不同的屏幕算出html的font-size，通过js来动态写meta标签。

事实上他做了这几样事情：

动态改写标签

给元素添加data-dpr属性，并且动态改写data-dpr的值

给元素添加font-size属性，并且动态改写font-size的值

比如我们在做移动端的时候，经常拿到的设计稿是640px或者750px。自己项目中就是640px，以此为例，自己在项目中为了计算方便，所以给html根元素设置的字体大小是100px，也就是在640px下面。这里注意，我们给html设置100px，这个是字体哦，所以最好在body设置一下字体大小。

// 设置html元素的字体大小为100px// 所有的像素我们直接除以640px  ——  6.4rem64px —— 0.64rem

那么如果64px，对应我们写rem就是0.64rem，也不需要动用计算器去计算rem，需要多强的大脑呀(虽然有很多插件帮我们)

修改flexible.js。640px下面的10就变成6.4

这样，我们页面直接把px换算成rem，就可以实现自适应。(记住，自己这里以640px设计稿为基础，如果是750px就是除以7.5)。

字号不使用rem

我们都知道chrome的最小显示的字体是12px，如果字体用rem，计算出来小于12px，那么就也会以12px显示，而且我们不希望出现13px或者15px这样的奇葩尺寸，所以字体最好是用px来表示，至于适应，我们可以写媒体查询。

vue中使用rem

vue现在正是火的势头上，作者说明年估计3.0要出来了。那么在vue我们如果做移动端自适应怎么弄呢？

安装flexible

在命令行中运行如下安装：

npm i lib-flexible --save-dev

引入flexible

在项目入口文件 main.js 里 引入 lib-flexible

// main.jsimport 'lib-flexible'

对于我们的index.html，最好是不要meta标签，flexible会自动添加上的，因为有一个判断。当然了，懒惰果然是最大的生产力，有的人觉得换算rem太麻烦，就出现了插件px2rem-loader，把px自动转化为对应的rem。但是呢，麻烦的就是如果引入外部的css文件，那么也会把px转化为rem。自己在项目中就是手动计算rem，用上面的方法，直接除以100，这个应该很简单吧，都是程序员，数学这个还是可以吧......

大屏自适应

这个图片很熟悉吧，时刻数据的滚动，通俗的说就是在很大很大的屏上显示数据，怎么炫酷怎么来。

我厂的效果类似于下面这样，但是更好看点，嗯，得自信不是。

这样的设计稿一般是1920*1080，然后需求就是大屏，放在大屏展示。其实实现的效果也是用的rem。当然之前也内部封装的缩放在body上来显示。

心目中的理想效果就是无论窗口怎么变，我们的内容都保持原来的比例，并尽量占满窗口。大屏，你如果不希望展示更多的文本，还嫌麻烦，字体也可以使用rem，毕竟很方便。和上面移动端一样的方法rem+flexible就可以比较很好的展示了。这时候内部除以的数字就是19.2来计算html字体的大小了。

终于写完了，本来想把大屏单独出来的，有很多的知识点，但是想想都是用的一样的技术，还是在一起吧，反正技术无好坏，就看怎样使用了。

获取更多精彩vue大屏，请点击下方 “了解更多”