vue 在网页打开适配移动页面大小

Posted 2023-03-21

参考技术A 写下记得更加深刻！！！

1、在app.vue 判断是否用pc打开，如果是将 html的字体设置55px，当然移动端的单位都是使用rem的前提。

2、因为pc的web滚动条在各个浏览器是不一样，比如：google和火狐还有ie，这样滚动条可能会造成布局乱掉，所以特意找了下大佬们的滚动条插件，有  vue-gemini-scrollbar  和  vuescroll   个人感觉对vue还是特友好的，安装如下

使用就要看你的需求，因为我是全局都要使用所以在main.js引入

然后在组件使用方式是，在需要滚动的区域下包上

在加的时候可以看下外层是否有一个overflow:auto的css属性；把这个属性调成overflow:hidden看下原来的滚动条是否隐藏了，如果是说明这就是你要叫上<GeminiScrollbar>的位置。  vuescroll 也是类似的。暂时测试i9+和火狐，360是可以的

还有就是我发现$('html').css('font-size', '50px')这句好像没有生效，所以我就在index.html加上了font-size:54px !important;

最后就能完美适配。

Vue 项目中的移动端适配方案

参考技术A

工具 & 插件

配置

引入 lib-flexible 更简便的方法是直接使用阿里CDN，在模板文件 index.html 中通过script标签引入

插件

使用

这样的话这个 loader 会自动将我们写的 px 转为 rem，配合跟元素大小的随视口大小改变，可以实现移动端的适配。

总而言之，如果设计稿为 750px，那么 1vw = 7.5px，100vw = 750px。其实设计稿按照设么都没多大关系，最终转化过来的都是相对单位，我们可以使用插件帮助我们把书写的 px 转为 vw / vh。

不过，使用 vw 具有一定的缺陷：

插件

使用