一篇文章搞懂,vue中pc端与移动端适配解决方案
发布网友
发布时间：2024-09-17 10:33
共1个回答
热心网友
时间：2024-09-29 07:05
1.移动端适配方案
1.1 基础概念
viewport即视窗、视口，用于显示网页部分的区域，在PC端视口即是浏览器窗口区域，在移动端，为了让页面展示更多的内容，视窗的宽度默认不为设备的宽度，在移动端视窗有三个概念：布局视窗、视觉视窗、理想视窗。
viewport详细设置：
移动端默认会缩放大尺寸的页面的，当我们把上述代码去掉之后，就会随着移动端缩放的比例走，而且还可以自由放大。
1.1.1 解决方案一viewport缩放 方案统计：
代码原理：
【7】 移动端开发自适应解决方案（阿里团队高清方案）
1.1.2 解决方案二—两套页面 同时兼任pc和移动适配 通过配置两套不同路由和判断是否是移动端实现 核心代码：router.addRoute(isMobile() ? mobileRoutes[1] : pcRoutes[1])；（区分路由）
1.1.3 解决方案三—postcss-pxtorem、amfe-flexible 搭配工程化，可以参考第二章【PC端适配方案】
2.PC端适配方案
vue项目使用element-ui框架Rem适配（postcss-pxtorem、amfe-flexible），自动转换px为rem，解决响应式问题
1366 * 768 ： 普通液晶显示器
1920 * 1080： 高清液晶显示器
2560 * 1440： 2K高清显示器
4096 * 2160： 4K高清显示器
1280 * 720： 笔记本（1920*1080分辨率下系统默认推荐150%缩放比产生的尺寸） 大屏数据可视化项目通常用于放在电视或广告屏上展示用，而不允许出现滚动条
2.1. 适配痛点难点
设计稿按照1920*1080的分辨率，16:9的比例设计， 实际开发中，document窗口不足16:9（高度减掉顶部tab及导航栏，地址栏等） 不同分辨率：实际应用场景中，显示场景不同，不能固定写死px单位 不同比例：不同的显示器宽高比与设计稿不一致
2.2. 什么是rem
rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。简单可理解为屏幕宽度的百分比。
但是，项目中常见尺寸绘制采用的均是px，要改用rem一时半会缓不过来，而且可能还要换算转换，所以使用rem还是比较麻烦的，但是，我们可以通过插件，能够将项目中的px转换为rem，还可以自定义基数。
2.3. 安装依赖
2.3. 引入amfe-flexible 由于 viewport 单位得到众多浏览器的兼容，lib-flexible 这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用 viewport 来替代此方。（待考证？） amfe-flexible是lib-flexible的升级版 flexible就是根据不同的屏幕算出html的font-size，通过js来动态写meta标签 实上他做了这几样事情：
在main.js中引入amfe-flexible
amfe-flexible 等价代码
2.4. 配置vue.config.js
配置postcss-pxtorem ,可在vue.config.js、postcsssrc.js、postcss.config.js、其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可.
2.5. 总结
2.5.1 注意事项：
1. 不能使用行内样式 对于行内样式，阿里手淘并不能将px转rem，所以对于需要自适应的样式，如font-size、width、height等请不要写在行内。同理，对于不需要转化的样式可以写在行内，或者使用PX（大写）作为单位。 暂未找到可以转行内rem的插件，可根据下面地址的方式自己实现（未验证是否可行）。 blog.csdn.net/weixin_3961…
2. 字号不使用rem 我们都知道chrome的最小显示的字体是12px，如果字体用rem，计算出来小于12px，那么就也会以12px显示，而且我们不希望出现13px或者15px这样的奇葩尺寸，所以字体最好是用PX（大写）来表示，至于适应，我们可以写媒体查询。
2.5.2 测试反馈：
已测试屏幕尺寸：1920*1080 、1366 * 768
问题：屏幕缩小，网页缩放，效果与原1920*1080不一致
2.5.3其他问题：
