https://blog.csdn.net/viewyu12345/article/details/83153718
公司内部一直有大屏的需求，也一直再做，中途也踩了一些坑，但是没有认真的来总结下。
首先项目中，做过移动端的适配，也有现在的大屏需求，中间都离不开不一个单位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标签。
事实上他做了这几样事情：
动态改写<meta>标签
给<html>元素添加data-dpr属性，并且动态改写data-dpr的值
给<html>元素添加font-size属性，并且动态改写font-size的值
比如我们在做移动端的时候，经常拿到的设计稿是640px或者750px。自己项目中就是640px，以此为例，自己在项目中为了计算方便，所以给html根元素设置的字体大小是100px，也就是在640px下面。这里注意，我们给html设置100px，这个是字体哦，所以最好在body设置一下字体大小。
// 设置html元素的字体大小为100px
// 所有的像素我们直接除以
640px —— 6.4rem
64px —— 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.js
import '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字体的大小了。
终于写完了，本来想把大屏单独出来的，有很多的知识点，但是想想都是用的一样的技术，还是在一起吧，反正技术无好坏，就看怎样使用了。
参考资料：
大屏
https://www.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html
https://juejin.im/post/5a20fe96f265da431120025b
