vue中移动端自适应的postcss-plugin-px2rem插件

最新推荐文章于 2024-04-07 13:54:33 发布
VIP文章 最新推荐文章于 2024-04-07 13:54:33 发布
阅读量822 收藏 3
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47258963/article/details/109594258
版权

flexible

主要是用来响应式改变根元素的字体大小

安装命令 npm install lib-flexible --save

在main.js里面导入命令mport ‘lib-flexible’

要把index.html里面的标签删除;因为会自动添加

postcss-plugin-px2rem配置内容解释
安装命令 npm i --save postcss-plugin-px2rem

创建一个名为vue.config.js的文件写入

module.exports={
   
css:{
   
                loaderOptions: {
   
                    postcss: {
   
                        plugins: [
                            require
最低0.47元/天 解锁文章
@晔
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue中rem与postcss-pxtorem的应用详解
10-15
主要介绍了Vue中rem与postcss-pxtorem的应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vite项目配置postcss-plugin-px2rem、lib-flexible postcss-pxtorem
weixin_40283749的博客
09-19 1561
【代码】vite项目配置postcss-plugin-px2rem、lib-flexible postcss-pxtorem。
px转为rem方法之插件postcss-plugin-px2rem的使用方法
m0_67880202的博客
02-29 839
①安装webpack打包工具：npm install webpack -g②搭建vue脚手架：npm install -g vue-cli③创建vue项目：vue init webpack "项目名称"
vue-cli3 + vant + postcss-px2rem实现移动端页面.docx
09-06
vue-cli3 + vant + postcss-px2rem实现移动端页面
vue3.0中使用postcss-pxtorem的具体方法
10-15
主要介绍了vue3.0中使用postcss-pxtorem的具体方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
今天，我们使用Vue CLI3 做一个移动端适配 。   前言 首先确定你的项目是Vue CLI3版本以上的。 一、移动端适配包 1、安装移动端适配包 npm i lib-flexible -S 2、在 main.js 引入适配包 import Vue from 'vue' import App from './App.vue' import 'lib-flexible' // 引入适配包 Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') 3、在 index.html 编辑
postcss-plugin-px2rem 移动端适配原理
qq_33715850的博客
07-06 5738
postcss-plugin-px2rem 移动端适配原理
vue-cli3.0中使用postcss-plugin-px2rem 插件
loco26987421的博客
04-25 1412
推荐原因：因为 postcss-plugin-px2rem 这个插件 配置选项上有 exclude 属性，它可以配置 是否对 某个文件夹下的所有css文件不进行从px到rem的转换。 所以我们可以利用这个特性，把项目中的 node_module 文件夹排除掉。这样如果我们项目中是用了，前端UI框架的话，就不会吧UI框架（Vant,Element等）中的 px单位转换成rem了 postcss-plugin-px2rem官方文档：postcss-plugin-px2rem - npm 安装 npm
vue转移动端项目自适应 使用postcss-plugin-px2rem
limmt2020的博客
06-08 1046
vue转移动端项目自适应 使用postcss-plugin-px2rem
移动端适配 px换算rem插件 postcss-plugin-px2rem
bangbDIV的博客
06-07 1628
1.postcss-plugin-px2rem 引入使用(vue例子) cnpm install postcss-plugin-px2rem --save
babel-plugin-styled-components-px2rem：Babel插件，用于将px转换为样式组件的rem单位
01-30
babel-plugin-styled-components-px2rem 插件，用于将px转换为rem单位 使用处理模板字符串中的所有CSS文本。 启用选项时，添加运行时px2rem函数px2rem来处理嵌入在模板字符串中的表达式。 具有相似功能的TypeScript转换器： 。 目录 需求 您需要将babel-plugin-styled-components-px2rem的以下peerDependencies同时安装到您的项目中： { " peerDependencies " : { " @babel/core " : " ^7.0.0 " , " postcss " : " ^7.0.0 " } } 用法 看 使用React和样式化组件。 组态 babel.config.js ： module . exports = { plugins : [ [ 'styled-components-px2rem' , { rootValue : 100 , unitPrecision : 5 , minPixelValu
在postCss中配置rootValue的显示
l624702662的博客
12-01 3616
vue-cli3 使用postcss-plugin-px2rem
a8725585的博客
07-17 4025
postcss-plugin-px2rem是可以将px自动转化为rem的postcss插件 安装 npm i postcss-plugin-px2rem --save -dev package.json中添加配置（组件中px转rem才生效）在package.json、package.json、package.json中设置很重要 "postcss-plugin-px2rem": { "r...
vue 配置 postcss-px2rem
最新发布
m0_66995023的博客
04-07 548
就是为了让我们直接在将代码中 px 自动转化成对应的 rem 的一个插件 (rem 是 root em 的缩写，rem 不是相对于当前元素，而是相对于根元素，所以，不论什么位置，使用 rem 单位都是相对于根元素的 font-size)这样配置之后只是对 css 起作用，并不能对 sass、scss、less 等预处理语言进行处理，所以我们需要另外一个插件。在 src/utils 文件夹中新建文件 rem.js 根据浏览器的宽度来设置根元素的 font-size。
postcss-pxtorem适配插件动态配置rootValue（根据文件路径名称，动态改变vue.config里配置的值）
qq_43217258的博客
07-28 2731
想到通过判断文件夹名称的方式，因为不同项目，肯定有分开的文件夹包着，特殊的分辨率，按照他路径名称判断有没有这个文件夹名称就行了。
Vue3、vite项目页面自适应配置（postcss-plugin-px2rem、amfe-flexible）
qq_45859670的博客
11-15 8686
vite 天生就支持对css文件的直接处理关于预处理器☀️目前，在工程化开发中，使用最多的应该就是Less、Sass和Stylus。☀️首先，还是介绍一下它们吧。它们有个统一的名字——css预处理器。☀️何为CSS预处理器？应该就是一种可以将你根据它的规则写出来的格式转成css的东西(还是讲的通俗一点)。☀️它们的出现可以说是恰逢其时，解决了css的一些缺憾：1、语法不够强大，不能够嵌套书写，不利于模块化开发。
vue-cli3.0 使用postcss-plugin-px2rem（推荐）自动转换px为rem 的配置方法
碉堡飞哥的博客
08-16 3180
第一步安装 npm install amfe-flexible -S npm install postcss-px2rem -S 第二步引入 lib-flexible 在入口main.js中 引入 lib-flexible import "amfe-flexible/index.js"; 注意事项（important）: 由于flexible会动态给页面header中添加标签，所以务必请把目录...
移动端 REM 适配
weixin_45580774的博客
02-17 145
移动端rem适配
postcss-plugin-px2rem cli3 pc手机端配置
09-06
postcss-plugin-px2rem是一个PostCSS插件，用于将CSS中的px单位转换为rem单位，以实现适配不同屏幕尺寸的效果。cli3指的是Vue.js的脚手架工具，用于构建Vue项目的基础结构。PC和手机端的配置指的是在使用cli3构建Vue项目时，如何配置postcss-plugin-px2rem插件来处理PC和手机端的样式适配。 首先，需要在package.json文件中添加postcss-plugin-px2rem插件的依赖。 然后，在项目的根目录下，创建一个postcss.config.js的文件，用于配置postcss-plugin-px2rem插件的选项。 配置文件的内容如下： ```js module.exports = { plugins: [ require('postcss-plugin-px2rem')({ remUnit: 75, // rem单位的基准值 exclude: /node_modules/i, // 排除node_modules目录下的文件 mediaQuery: false, // 是否转换@media查询中的px minPixelValue: 2 // 小于指定数值的px不转换为rem }) ] } ``` 在配置文件中，我们设置了remUnit的值为75。这意味着在设计稿中，1px将被转换为0.01333rem（1/75=0.01333）。 我们还设置了exclude选项，用于排除node_modules目录下的文件，因为通常我们不希望对第三方库的样式进行转换。 mediaQuery选项用于确定是否转换@media查询中的px单位。 minPixelValue选项用于确定小于指定数值的px单位是否转换为rem。 最后，在cli3的配置文件vue.config.js中，添加postcss插件的配置，如下： ```js module.exports = { css: { loaderOptions: { postcss: { config: { path: 'postcss.config.js' } } } } } ``` 以上配置将使postcss-plugin-px2rem插件在构建Vue项目时自动应用于CSS文件。 通过以上的配置，我们就可以在cli3构建的Vue项目中使用postcss-plugin-px2rem插件来实现PC和手机端的样式适配了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值