关于vue-cli3.0以上架构移动端rem适配方案总结

最新推荐文章于 2023-06-01 11:58:34 发布
最新推荐文章于 2023-06-01 11:58:34 发布
阅读量457 收藏 1
点赞数
分类专栏： webH5 文章标签： vue.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34917408/article/details/108495615
版权
本文总结了适用于Vue-cli3.0以上版本的移动端rem适配方案，详细介绍了需求背景和实现步骤，包括设置、安装相应插件、配置文件以及适配不同设备的方法。
摘要由CSDN通过智能技术生成

关于vue-cli3.0以上架构移动端rem适配方案总结

1.需求描述：
  • 最近在做的一个VUE新项目需要适配H5，所以这里分享一下我使用的移动端适配方案，这里要达到的效果是开发的时候用px，在项目运行起来后在浏览器端自动转换成rem适配（注意：这里的方案只适用于vue-cli3.0以上版本）。
2.解决方案：

  • 1.首先设置viewport

  •  <meta name="viewport" content<
了解本专栏 订阅专栏 解锁全文 超级会员免费看
木屋x
关注
专栏目录
订阅专栏
vue-cli3.0 移动端适配 rem 布局
高山景行，一尘不染
03-16 776
npm install lib-flexible 安装： 在main.js引入中：import 'lib-flexible/flexible.js' 1.1、npm install postcss-pxtorem或者 yarn add postcss-pxtorem： 在package.json内，在postcss内添加： "postcss": { "plugins": {...
vue做移动端适配最佳解决方案(亲测有效)
12-04
vw 解决方案 1. 安装并配置PostCss插件 代码如下:npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano –S 2. 对 PostCss 进行配置 找到在根目录中的.postcssrc.js，对PostCSS插件进行配置 module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, // to
vue3.0 rem适配
乐YB的博客
03-02 1634
1.安装两个插件 npm i postcss-pxtorem -S npm i amfe-flexible -S 2.根据vue3提供的新配置方法，在vue-config.js中对CSS做配置： const autoprefixer = require('autoprefixer'); const pxtorem = require('postcss-pxtorem'); module.exports = { css:{ sourceMap:false, loaderOpt
vue-cli3.0 移动端px转换rem方法
m0_46242315的博客
02-01 1060
vue-cli3.0 移动端px转换rem方法 创建好项目 以下安装建议使用淘宝 NPM 镜像，下载速度快、成功率高。 淘宝 NPM 镜像地址 直接安装： npm install -g cnpm --registry=https://registry.npm.taobao.org 第一步：下载 amfe-flexible npm install amfe-flexible -S 第二布：...
vue中web手机端的适配问题
a_115098的博客
09-02 2758
vue中web手机端的适配问题 在使用vue进行web手机端适配时可以使用rem做单位进行适配。rem为相对单位，是相对HTML根元素的字体大小为基准计算大小。如设置html:{font-size:16px}，那么p{font-size: 1rem}的字体大小就为16px。 所以使用rem进行适配的大体思路就为：根据屏幕的大小调整html元素的字体大小。 //这里使用的vue created() { //获取html var html = document.getElementsByTagNam
vue项目PC端和移动端实现自适应(rem)
LSH_的个人博客
09-26 1973
vue适配不同的分辨率
基于vue-cli3.0+webpack4+vant ui+sass+rem适配方案+axios封装，构建手机端模板脚手架
最新发布
04-03
本项目基于`vue-cli3.0`、`webpack4`、`vant ui`、`sass`、`rem`适配方案以及`axios`的封装，提供了一套完整的手机端模板脚手架。下面将详细介绍这些技术栈及其在构建过程中扮演的角色。 1. **Vue CLI 3.0**： Vue...
基于vue-cli配置lib-flexible + rem实现移动端自适应
08-28
基于Vue-CLI配置Lib-Flexible + Rem实现移动端自适应 Vue-CLI是 Vue.js 的标准开发工具，提供了许多功能强大且灵活的配置选项。 Lib-Flexible是一个非常流行的移动端自适应解决方案，通过使用Rem单位来实现响应式...
详解基于vue-cli配置移动端自适应
08-28
本文主要介绍了基于vue-cli配置移动端自适应的方法，主要涉及到三个方面：lib-flexible库的安装和使用、px到rem的转换、vue-cli配置的修改。 首先，在项目中安装lib-flexible库，使用命令`npm i lib-flexible --...
vue 在web项目中写H5页面并适配移动端（记一次笔记）
qq_40429514的博客
06-01 2779
vue 在web项目中写H5页面并适配移动端（记一次笔记）
Vue移动端 / PC端适配解决方案
weixin_48862362的博客
11-24 2844
1.开发环境 npm 安装插件​​​​​​ npm install postcss-px-to-viewport --save-dev 2.项目根目录添加配置文件 postcss.config.js > node_modules > public > src postcss.config.js 3.添加配置 module.exports = { plugins: { 'postcss-px-to-viewport': { unitToConvert: 'px'
vue项目实现pc端和手机端屏幕自适应
weixin_72459765的博客
10-28 6547
vue项目实现pc端和手机端屏幕自适应
vue-cli3.0引入px2rem与lib-flexible 移动端适配
热门推荐
光
09-05 1万+
关于移动端的适配，我喜欢用px2rem配合lib-flexible，非常方便，vue-cli3.0后，项目配置被大大精简了，这使得原来配置px2rem的文件不复存在，但其实只要掌握了正确的姿势，配置方法比原来更简单~ 新时代的移动端解决方案：vw（待补充） lib-flexible 作用：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来...
YDOOK: vue3: vue-cli4: 更换页面 ICON icon图标标志
YDOOK
02-13 1117
YDOOK: vue3: vue-cli4: 更换页面 ICON icon图标标志 © YDOOK JYLin 1. 将新 icon 文件拖入文件目录： ./public: 2. 新建或者在已有的 vue.config.js 文件根位置中输入： module.exports = { pwa: { iconPaths: { favicon32: 'ydook.ico', favicon16: 'ydook.ico',
vue 前端移动端适配问题
chengjingxuang123的博客
08-17 798
1.引入amfe-flexible安装amfe-flexible： npm i amfe-flexible --save 在项目的入口main.js文件中引入amfe-flexible:import 'amfe-flexible' 2.使用postcss-pxtorem自动将css中的px转换成rem安装postcss-pxtorem ： npm install postcss-pxtorem --save-dev 3. 新建vue.config.js文件，并添加以下代码使用 postc..
vue-cli2.0 vw实现移动端适配
fly_wugui的博客
03-14 1001
参考地址: 如何在Vue项目中使用vw实现移动端适配. 升级版3.0 ：使用vue-cli3.0使用vw/rem实现移动端适配. 使用vue-cli2.0构建项目适配移动端 项目环境： win10 node v8.9.3 npm 5.5.1 使用vue-cli命令构建项目 vue init webpack myapp ...
vue使用rem适配（亲测有效）
Kobeloveu
08-05 3531
1.使用插件 当前插件版本：postcss^8.3.6 postcss-pxtorem^5.1.1 npm i postcss postcss-pxtorem -D 2. 在vue.config.js中配置 css: { loaderOptions: { postcss: { plugins: [ require("postcss-pxtorem")({ // 换算基数， rootValue: 16
移动端禁止网页缩放meta标签
qq_43292127的博客
12-21 1260
&lt;meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"&gt; meta标签中的content属性里有一个width=device-width的值，这个值就是用来告诉浏览器，该页面将要使用设备的宽度来解析，后面的属性值则是告诉该页面： use...
vue-cli3.0实战：构建完善移动端框架
基于vue-cli3.0构建的移动端架子涵盖了从项目初始化、CSS预处理、移动端适配、API通信、状态管理等多个方面，提供了一个全面的基础，帮助开发者快速建立起功能完善的移动端应用。项目地址和demo地址的提供，为读者...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木屋x

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值