vue 某一行css px不自动转rem

最新推荐文章于 2024-05-19 20:18:26 发布
最新推荐文章于 2024-05-19 20:18:26 发布
阅读量495 收藏 8
点赞数 7
文章标签： vue.js css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZZZMY8/article/details/136186275
版权 
.item-box {
    height: 500px; /*no*/ // /*no*/ 表示此行css样式不进行单位转换
  }

单独设置某一行代码单位不进行 px和rem转换。

ZZZMY8
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue中px自动转为rem的解决方法
zepcjsj0801的博客
06-09 1500
vue项目中页面中px会自动转为rem， 但是在van-swiper 这种插件中，如果要设置每个轮播项宽度不是全屏，这种情况下肯定不能兼容全部尺寸的设备，因为半屏的轮播需要给轮播一个宽度，但是这个宽度不会像css中的尺寸一样自动转为rem 这就导致实际尺寸超出每项的设置尺寸，解决方法很简单，把css中的单位px设置成Px就可以了，页面就不会自动转换为rem了 ...
Vue项目自动转换 px 为 rem的实现方法
01-19
postcss-pxtorem：转换px为rem的插件。 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小。 原理网上有很多文章分享，这里不具体解释。...
px2rem中设置px不转换成rem
weixin_43837268的博客
03-13 6082
4、在代码中使用 #box { height: 44px //用postcss-px2rem插件配置后相当于0.44rem width: 100% font-size: 24px;/*no*/ //如果不想用插件转换可以用/*no*/标识符 } ...
vue中px自动转rem插件使用
shenwen5225的博客
01-20 5277
在用vue写移动端的项目时会用到rem适配，而将px计算转换rem比较麻烦也不好修改，并且许多UI插件使用的单位仍然是px,这时我们可以使用 postcss-pxtorem 工具帮助我们自动转换。 以 vue-cli2.0 创建的项目为例： 1.在 src/assets/js/ 文件夹下创建 rem.js 文件，自定义 html 的 font-size 大小，例： /* 移动端适配 */ ;(fu...
css自动转rem,css之px自动转rem—“懒人”必备
weixin_39614877的博客
08-03 1469
作为一名前端开发，尤其是在做移动端适配时，rem是我们经常用到的单位，它的好处大家可以自行搜索，网上已经有很多了。但是我们再将设计稿上的px转换成rem时，得手动的去计算，这是一个很耗时、费力的过程，有没有什么办法可以“解放”我们呢？(原谅我的懒~)1.CSS处理器Sass、LESS以及PostCSS这样的处理器都可以处理。Sass(使用Sass的函数、混合宏这些功能来实现):@function ...
Vue中rem与postcss-pxtorem的应用详解
10-15
主要介绍了Vue中rem与postcss-pxtorem的应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue打包的时候自动将px转成rem的操作方法
12-04
px2rem-loader 需要与 flexible 配合使用，不然px2rem仅仅只是转成rem却不会设置rem的信息 安装 flexible npm i lib-flexible -S 然后在main.js中引入 import 'lib-flexible/flexible' 直接引入的文件需要有优先与...
vue3.0中使用postcss-pxtorem的具体方法
10-15
主要介绍了vue3.0中使用postcss-pxtorem的具体方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 672
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue中的事件
weixin_43390711的博客
05-16 162
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1110
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Vue.js的发展史（一）
2301_79683791的博客
05-15 756
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
基于Vue和uni-app的增强型多选框Checkbox组件开发
chenchuang0128的博客
05-16 352
该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
山花的博客
05-15 1040
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。
基于Vue3 + js-tool-big-box工具库实现3个随机数字的小游戏动画，快来挑战你的非凡手气！
xingyu_qie的专栏
05-17 836
基于Vue3 + js-tool-big-box的3个随机数字
VueScan Pro中文
最新发布
CSDN专家-微编程的博客
05-19 242
VueScan Pro中文是一款VueScan图像扫描软件,提供色彩平衡和颜色校正功能,适用于6500多台扫描仪,VueScan破解版内置驱动,可以对扫描仪软件反向工程,支持200种以上的底片类型,复杂的白色平衡算法,用于检查物体表面暇疵的红外线底片扫描,成批扫描,自动剪取图像等等,提高扫描仪的扫描速度和工作效率.
vue 使用draggable拖拽实现响应式侧边栏，拖拽数据悬停在侧边栏分区超一秒时自动切换到对应分区
weixin_45956838的博客
05-17 561
使用draggable拖拽实现响应式侧边栏，拖拽数据悬停在侧边栏分区超过一秒自动切换到对应分区
vue使用postcss-pxtorem
07-25
在Vue项目中使用postcss-pxtorem插件可以将px单位转换为rem单位。以下是使用步骤： 1. 首先，确保你已经安装了postcss和postcss-pxtorem插件。可以通过以下命令进行安装： ``` npm install postcss postcss-pxtorem --save-dev ``` 2. 在项目根目录下创建一个postcss.config.js文件，并在该文件中配置postcss-pxtorem插件。示例配置如下： ```javascript module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 16, // rem基准值，通常为设计稿宽度的1/10或1/16 propList: ['*'], // 需要转换的属性，*表示所有属性 selectorBlackList: [] // 需要忽略的选择器，比如引入第三方UI库时需要排除 } } } ``` 3. 在项目的build/webpack.base.conf.js文件中的postcss-loader配置中添加postcss-pxtorem插件。示例配置如下： ```javascript const px2remConfig = { loader: 'postcss-loader', options: { sourceMap: true, config: { path: 'postcss.config.js' // 指定postcss配置文件路径 } } } module.exports = { // ... module: { rules: [ // ... { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader', px2remConfig // 添加postcss-pxtorem插件 ] }, // ... ] }, // ... } ``` 4. 配置完成后，重新启动项目，此时px单位会自动转换为rem单位。 需要注意的是，postcss-pxtorem插件会将所有px单位转换为rem单位，如果你希望某些特定的属性不进行转换，可以在配置文件中的propList选项中添加对应的属性名。另外，如果你使用了第三方UI库，可能需要在配置文件的selectorBlackList选项中添加相应的选择器来排除转换。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值