vue项目配置rem移动端适配

最新推荐文章于 2024-04-25 18:50:18 发布
最新推荐文章于 2024-04-25 18:50:18 发布
阅读量1k 收藏 2
点赞数 2
分类专栏： vue实现的功能及遇到的问题解决【纪录】 文章标签： vue适配移动端
张砚博
本文链接：https://blog.csdn.net/qq_47272950/article/details/124688406
版权

一、项目介绍

脚手架CLI：@vue/cli
Vue版本：2.6.11
移动UI组件库：Vant#2.10.14
CSS预处理器：sass

二、配置lib-flexible插件

下载插件

npm i -D lib-flexible

导入：在src/main.js中使用

import 'lib-flexible'

三、项目配置

安装postcss-px2rem和postcss-loader插件依赖

npm i -D postcss-px2rem postcss-loader

提示： 如果项目使用了第三方的UI组件库（文本以VantUI为例），而

了解本专栏 订阅专栏 解锁全文 超级会员免费看
码上流星&洒下星辰
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
移动端rem适配（vue&H5）-实践记录
Harlan7的博客
05-28 816
移动端rem适配（vue&H5）-实践记录背景：第一步：第二步： 背景： 当有移动端适配需求的时候，需要纠结不同设备的不同展示方式，这个时候就需要rem，通过搜索资料并实践，得出了以下成果–以作个人记录(本项目为vue 项目) 第一步： 新建rem.js !function(n){ var e=n.document, t=e.documentElement, i=750, d=i/100, o="orientationchange"in n?"o
vue 实现 rem 布局或vw 布局的方法
12-13
一、实现 rem 布局 移动端 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 方法一、在 index.html 或者 main.js 中添加以下代码： const setHtmlFontSize = () => { let deviceWidth = document.documentElement.clientWidth || document.body.clientWidth if (deviceWidth >= 750) { deviceW
移动端适配 使px自动转换rem
12-14
先安装postcss-pxtorem： npm install postcss-pxtorem –save-dev 进行安装 通过屏幕的变化，设置动态根元素 font-size ：   我写在vue的html中 function setRem () { let htmlWidth = document.documentElement.clientWidth ||document.body.clientWidth; //检测html的屏幕宽度和body的屏幕宽度 document.documentElement.style.fontSize= html
解决vue移动端适配问题
12-11
1，先看看网上关于移动端适配讲解 再聊移动端页面适配，rem和vw适配方案！ 基础点：rem相对根节点字体的大小。所以不用px; 根字体：字体的大小px; px：你就当成cm(厘米)这样的东西吧； 基准：750设计稿； 这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！ 目标一、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是想到了vw，对，就是这个意思；——最大程度在各个尺寸屏幕上还原设计稿 目标二、px转换成rem：一般UI给的设计稿宽度大小是750，所以，我们想直接写上面UI标记的尺寸；——最大程度减少工作 为什么
vue3.0项目中运用vant的以及移动端的适配
最新发布
chengcheng9876的博客
04-25 1098
vue3.0项目中运用vant的以及移动端的适配
vuevantUIaxios移动端项目rem做适配
08-10
vue-vantUI-axios 移动端项目，rem做适配
rem 失效
石头匠人的博客
12-02 1797
rem 失效
element-ui element-plus dialog - 分析
huxianc的博客
12-21 3300
源代码地址 - dialog version:element-plus 1.0.1-beta.0 index.vue <template> <!-- dialog是v-if控制渲染的 --> <template v-if="destroyOnClose && !visible"></template> <template v-else> <!-- vue3 新增组件 teleport to表示元素.
Vue用Rem实现自适应布局
weixin_42839080的博客
10-17 4111
一 什么是rem rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。 二 为什么使用rem及原理 2.1 为什么使用r...
Vue实现rem自适应布局，无需安装插件，代码简单
coderYYY的博客
12-22 1272
本文是通过在Vue中监听window的resize事件，动态设置html的font-size，以达到自适应效果。
【vue】vue使用rem布局
zxsy19966的博客
09-17 207
rem布局
vue项目中 —— rem布局适配方案
u010227042的博客
08-02 291
安装 amfe-flexible、postcss-px2rem-exclude cnpm i amfe-flexible postcss-px2rem-exclude --save 安装完毕，会在 package.json 文件的dependencies 属性中看到如下： 2、在main.js文件中引入 import 'amfe-flexible' 3、配置postcss.config.js 如果你的设计图是750px，可以在新建 postcss.config.js.
vue 移动端适配方案详解
11-29
一、方法一：rem 布局 在主入口：index.html，<head> 标签内添加如下JS 代码：（实现在标准 375px宽度适配下，100px = 1rem。） [removed] (function () { // 在标准 375px 适配下，100px = 1rem; var baseFontSize = 100; var baseWidth = 375; var set = function () { var clientWidth = document.documentElement.clientWidth || window.innerWid
vue使用rem实现 移动端屏幕适配
12-01
要想移动端适配 并使用 rem 您需要先看这篇文章，配置好less :right_arrow_selector: 在vue 中使用 less，就可以使用rem了 如果项目已经开发的差不多了，没有用到rem 又要使用rem，您用这招。 postcss-pxtorem：...
关于vue利用postcss-pxtorem进行移动端适配的问题
01-19
1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置，而不要用webpack-simple，因为webpack里面很多插件加载器之类的都是给你预配好的，这样在项目构建中就不会遗漏什么。 2.cnpm install postcss-...
解决element-ui使用rem后 el-dialog预览图片 img变小问题
cmmboy1990的博客
01-17 841
1.bug效果 2.原始代码 <el-dialog :visible.sync="dialogVisible" append-to-body> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> 2.解决： style中加入css样式 /* 解决使用rem后 img变小问题 */ .el-dialog__body img { width: 100%; height: 100%;
rem屏幕自适应
weixin_30583563的博客
08-01 152
(function (doc, win) { let docEl = doc.documentElement let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' let recalc = function () { var clientWidth = docEl.clien...
elementUI中dialog踩坑
wuxeek的博客
12-03 1万+
开发过程中遇到两点问题： 1、修改dialog的custom-class不生效； 2、定制validate规则的时候，无法获取正确的this对象 对于第一个问题，可以从图中知道，虽然笔者已经设置了dialog的custom-class，实际渲染过程中也元素也确实具有custom-class中的类，但是样式就是不生效。 dialog-width的具体样式如下： 即设置了dialog...
element-ui移动端rem适配
热门推荐
q740766100的博客
10-09 2万+
https://segmentfault.com/a/1190000015238394
vue2移动端项目rem布局适配
11-03
为了在Vue2移动端项目中实现rem布局适配，可以使用postcss-pxtorem插件来自动将px转换为rem。具体步骤如下： 1. 安装postcss-pxtorem插件：npm install postcss postcss-pxtorem --save-dev 2. 在根目录创建postcss.config.js文件，并添加以下代码： ``` module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 37.5, // 设计稿宽度的1/10，这里假设设计稿宽度为375px propList: ['*'] } } } ``` 3. 在main.js中引入postcss-pxtorem插件： ``` import 'postcss-pxtorem' ``` 4. 在样式文件中使用px作为单位，插件会自动将其转换为rem。 需要注意的是，如果使用了第三方UI库，可能需要单独配置rootValue和propList，以确保UI库的样式不会被转换。此外，如果设计稿宽度不是375px，需要根据实际情况修改rootValue的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

码上流星&洒下星辰

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

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

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

打赏作者

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

抵扣说明：

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

余额充值