rem实现官网PC 移动端适配

最近搭建了一个公司的官网系统，要实现移动端和手机端的适配，屏幕缩放要能够满足自适应的条件，下面简单的介绍一下技术的实现过程，也算是自己工作的一个总结。

1.技术选型

 选用vue脚手架 element-ui（因为主要是pc端）借助框架和组件的样式

因为是静态页面居多 使用的组件样式也比较少 所以element-ui用了按需引入

 2.实现中英文切换

因为项目要实现2个语言版本的切换 就借用了vue i18n的国际化

设置en.js和zh.js对应的变量就可以了 

这里要注意一下版本的问题 我安装了vue-i18n 居然没有被编译 后来换了一个版本就解决了

来看一下使用的版本

我们需要在语言切换的时候 重新存储一下语言的类型

这样就实现了中英文的存储和切换

html根据定义的相同中英文变量就能显示不同的值

演示效果

3.实现rem自适应布局

rem布局的核心是设置根元素的font-size,因为我们要实现动态的字体和元素的适配,就不能写死font-size,这里采用动态获取屏幕分辨率尺寸设置font-size

演示效果

4.性能优化

因为涉及到的图片太多 导致项目npm run build打包部署之后依然加载很慢

这里使用了图片的懒加载和进行了图片的压缩(本来1M多的图片压缩至200kb左右)

优化后 可以在控制台查看加载时间和模拟网络慢速情况下的性能

 优化过后在3g网络下也只有3s 比之前的10几s快多了

5.移动端适配

因为之前已经做了rem布局的适配 所有大体的布局基本上都能完成适配

只在一些样式上面 写了媒体查询调整就可以了

演示效果

6.require和import的区别

引入可以选用require和import两种方式，一个是在运行时编译，一个是在加载时编译，总的来说，就是import比require的速度要更快些，它把所有的要引入的变量放在了加载之前，但我测试了一下3g的场景下，2种方式只差了0.0几秒，其实意义感觉不大，但还是更建议使用import引入方式。