vue-cli3移动端适配postcss-px2rem

最新推荐文章于 2024-02-25 21:53:54 发布
最新推荐文章于 2024-02-25 21:53:54 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 技术分享 文章标签： 移动端 适配 vue-cli3 rem postcss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/plm609337931/article/details/103383443
版权

1.public/index.html中增加：

<meta
  name="viewport"
  content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>

2.修改页面font-size:

以往都是用js监听页面宽度来动态计算设置根元素font-size
现在有了vw和vh这个神奇的单位，我们完全可以这样。。。

<html lang="en" style="font-size: 10vw">

3.安装postcss

npm install postcss-px2rem --save

4.配置postcss:

修改vue.config.js，增加postcss部分（vue-cli3 构建的项目比以前的精简许多，如果没有请在根目录新建vue.config.js文件）

module.exports = {
    css: {
        loaderOptions: {
          css: {},
          postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 37.5
              })
            ]
          }
        }
    },
}

最低0.47元/天 解锁文章
77不7
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中移动端自适应的postcss-plugin-px2rem插件
龚珂心的博客
11-10 842
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:{
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 编辑
vue-cli3 使用postcss-plugin-px2rem
a8725585的博客
07-17 4061
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...
vue3网页适配方案
最新发布
m0_74060440的博客
02-25 1130
vue3网页适配方案
Vue3、vite项目页面自适应配置（postcss-plugin-px2rem、amfe-flexible）
qq_45859670的博客
11-15 9963
vite 天生就支持对css文件的直接处理关于预处理器☀️目前，在工程化开发中，使用最多的应该就是Less、Sass和Stylus。☀️首先，还是介绍一下它们吧。它们有个统一的名字——css预处理器。☀️何为CSS预处理器？应该就是一种可以将你根据它的规则写出来的格式转成css的东西(还是讲的通俗一点)。☀️它们的出现可以说是恰逢其时，解决了css的一些缺憾：1、语法不够强大，不能够嵌套书写，不利于模块化开发。
vue-cli3.0 使用postcss-plugin-px2rem（推荐）自动转换px为rem 的配置方法
碉堡飞哥的博客
08-16 3195
第一步安装 npm install amfe-flexible -S npm install postcss-px2rem -S 第二步引入 lib-flexible 在入口main.js中 引入 lib-flexible import "amfe-flexible/index.js"; 注意事项（important）: 由于flexible会动态给页面header中添加标签，所以务必请把目录...
详解基于vue-cli配置移动端自适应
08-28
使用命令`npm i px2rem-loader --save-dev`安装px2rem-loader。 在vue-cli生成的webpack配置中，我们需要在cssLoader后添加px2remLoader，并设置remUnit选项。remUnit选项的值是设计稿宽度的1/10，例如，如果设计稿...
详解搭建一个vue-cli的移动端H5开发模板
11-21
- 安装`px2rem-loader`：`npm install px2rem-loader --save-dev` - 在`build/utils`配置px2remLoader，并更新generateLoaders函数。 - 在`main.js`设置html字体大小，根据屏幕宽度动态调整以适应不同设备。 **5. ...
关于vue利用postcss-pxtorem进行移动端适配的问题
10-15
主要介绍了关于vue利用postcss-pxtorem进行移动端适配的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】
weixin_44519496的博客
07-27 411
今天，我们使用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(
vue cli3+项目使用postcss-px2rem或者postcss-plugin-px2rem适配
斗师——Ace
07-17 1426
1. 使用postcss-px2rem或者postcss-plugin-px2rem讲vue项目的px全部转换未rem适配。 2. 下载： npm install --savepostcss-px2rem npm install --save'postcss-plugin-px2rem 3. 使用：在vue.config.js中 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/onli..
vue-cli3.0配置autoprefixer+postcss-plugin-px2rem（从创建开始）
qq_38935512的博客
12-28 2360
前端开发中，为兼容所有浏览器，部分CSS属性需要加上不同的浏览器前缀，这些属性多且难记。这里配置autoprefixer css后处理器自动兼容 看下效果 先单独配置autoprefixer CSS，less,sass都有用 1.vue create XXX 项目 这个就不多说了 2.安装相关依赖 npm install -D css-loader style-loader npm install -D postcss-loader autoprefixer postcss(这个我装的时候失败了，之后
vue-cli3.0中使用postcss-plugin-px2rem 插件
loco26987421的博客
04-25 1425
推荐原因：因为 postcss-plugin-px2rem 这个插件 配置选项上有 exclude 属性，它可以配置 是否对 某个文件夹下的所有css文件不进行从px到rem的转换。 所以我们可以利用这个特性，把项目中的 node_module 文件夹排除掉。这样如果我们项目中是用了，前端UI框架的话，就不会吧UI框架（Vant,Element等）中的 px单位转换成rem了 postcss-plugin-px2rem官方文档：postcss-plugin-px2rem - npm 安装 npm
h5移动端适配
weixin_45076451的博客
01-14 223
h5移动端适配 第一部分(项目中引入lib-flexible) 1.下载安装 lib-flexible npm install lib-flexible --save 2.在入口main.js文件引入 lib-flexible import 'lib-flexible' 第二部门(使用px2rem-loader自动将css中的px转换成rem) 1.安装 px2rem-loader npm i...
vue-cli3做适配 flexible px2rem
qq_36800701的博客
09-18 699
px2rem 构建项目 (vue-cli3.0) vue create hello-world (Manuall select features) 安装 px2rem-loader(devDependencies) npm install px2rem-loader --save-dev 移动端适配解决npm包 “lib-flexible” (dependencies) npm instal...
手把手教你vue-cli3搭建项目实现移动端自适应----- flexible和 postcss-px2rem
面对疾风吧
08-17 8675
1、安装 flexible和 postcss-px2rem 按照我说的一步一步去做，保证可以完成哦！有图有代码，简单明了可复制！ 如果能帮助到你，还望能给个赞+关注，鼓励一下！谢谢！ npm i lib-flexible postcss-px2rem --save flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-sc.........
VUEPC和手机屏幕适配
qq_45499633的博客
03-17 8960
vue项目移动端、pc端适配方案 vue项目移动端、pc端适配方案 lib-flexible 根据屏幕宽度，自动设置html的font-size postcss-px2rem 自动将px单位转换成rem 一、安装 lib-flexible和 postcss-px2rem npm i lib-flexible -S npm i postcss-px2rem -S 1 2 3 简要介绍这两个包的用途： lib-flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-sc
vue3 vite postcss-pxtorem移动端适配
10-21
移动端适配是一个常见的问题，而使用postcss-pxtorem可以将px单位转换为rem单位，从而实现移动端适配。在Vue3中，可以使用Vite作为构建工具，同时使用postcss-pxtorem插件进行转换。具体配置可以在vite.config.js或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值