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


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

浅析rem

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

rem自适应。CSS3的REM设置字体大小
<https://www.w3cplus.com/css3/define-font-size-with-css3-rem>

font size of the root element.


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

移动端自适应——手淘flexible

熟悉移动端的自适应方案的朋友对 rem 适应方案,肯定不陌生,最出名的就是阿里的 lib-flexible
<https://github.com/amfe/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 <https://www.npmjs.com/package/px2rem-loader>
,把px自动转化为对应的rem。但是呢,麻烦的就是如果引入外部的css文件,那么也会把px转化为rem。自己在项目中就是手动计算rem,用上面的方法,直接除以100,这个应该很简单吧,都是程序员,数学这个还是可以吧......

大屏自适应

你问我什么是大屏,当当当~



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

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



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


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

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

最后放上腾讯前端团队的一篇文章rem不是神农草,治不了移动端百病
<http://imweb.io/topic/5745adf5a94f742c1db63485>

参考资料:

大屏

https://www.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html
<https://www.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html>

https://juejin.im/post/5a20fe96f265da431120025b
<https://juejin.im/post/5a20fe96f265da431120025b>

rem+vue中使用rem

基于vue-cli配置移动端自适应
<http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/>

flexible.js如何实现rem自适应 <http://caibaojian.com/flexible-js-2.html>

vue-cli 配置flexible <https://segmentfault.com/a/1190000011883121>