手机端看vue项目

ipconfig查本机ip地址——找到项目下config文件夹下index.js文件
在这里插入图片描述
重启项目,输入手机浏览器输入地址或者http://cli.im/网站生成二维码手机扫

Vue 项目中进行手机端适配,通常需要解决的核心问题是不同设备的屏幕尺寸差异,以及如何实现响应式布局。常见的适配方案包括使用 `rem` 单位配合动态计算根字体大小、结合 `postcss-pxtorem` 插件将 `px` 转换为 `rem`,以及使用 `lib-flexible` 等工具库来辅助适配。 ### 配置 rem 适配方案 1. **安装依赖** 在项目中首先需要安装 `lib-flexible` 和 `postcss-pxtorem`,它们分别用于动态设置根字体大小和将 `px` 转换为 `rem`: ```bash npm install lib-flexible --save npm install postcss postcss-pxtorem --save-dev ``` 2. **配置 postcss-pxtorem 插件** 在 `vue.config.js` 文件中添加 `postcss-pxtorem` 的配置,将 `px` 转换为 `rem`,以实现基于根字体大小的响应式布局: ```javascript module.exports = { css: { loaderOptions: { postcss: { plugins: { 'postcss-pxtorem': { rootValue: 75, // 设计稿宽度为 750px 时,1rem = 75px propList: ['*'] // 对所有属性生效 } } } } } }; ``` 3. **动态设置根字体大小** 在 `main.js` 或项目入口文件中添加以下代码,动态计算并设置 `html` 标签的 `font-size`,以适配不同设备的屏幕宽度: ```javascript // 判断是否是移动端 const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); // 适配方法 const setRem = () => { // 默认基准值为 37.5,对应的设计稿宽度为 375px const baseSize = isMobile ? 37.5 : 128; // 获取屏幕宽度 const screenWidth = document.documentElement.clientWidth || document.body.clientWidth; // 设置 HTML 的根字体大小 document.documentElement.style.fontSize = (screenWidth / baseSize) + 'px'; }; // 初始化设置 setRem(); // 窗口大小改变时重新设置 window.onresize = function () { setRem(); }; ``` 4. **处理 meta viewport 标签** 为了确保移动端浏览器正确渲染页面,需要在 `public/index.html` 中设置合适的 `viewport`: ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> ``` 5. **注意事项** - 如果使用了 `lib-flexible`,它会动态添加 `viewport` 标签,因此需要手动删除 `index.html` 中已有的 `viewport` 标签,避免冲突 [^4]。 - 在大屏设备(如平板或 PC)上,`lib-flexible` 默认会将 `font-size` 固定为 54px,如果需要适配 PC 端,可以修改其源码以支持动态调整 [^2]。 ### 使用场景与适配效果 - **移动端优先**:上述方案特别适合以移动端为主的项目,能够有效适配不同尺寸的手机屏幕。 - **兼顾 PC 端**:通过判断设备类型并动态调整 `baseSize`,也可以实现对 PC 端的支持 [^3]。 - **设计稿适配**:通常设计稿宽度为 375px 或 750px,通过设置 `rootValue` 为 37.5 或 75 来匹配设计稿,确保视觉一致性 [^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值