vue+cli4移动端px自动转换rem

最新推荐文章于 2022-11-13 10:49:46 发布
最新推荐文章于 2022-11-13 10:49:46 发布
阅读量337 收藏
点赞数
分类专栏： vue实现移动端商城(某课网项目练习随记) 文章标签： vue.js
原文链接：https://www.jianshu.com/p/6f14e761ddae
版权

1.安装

文件目录下进入cmd进行安装
(可在vscode终端下进行)

npm install postcss-px2rem --save

2.配置文件

在目录下新建文件vue.config.js ，根据设计图的宽度设置remUnit的值，37.5即375px

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

3.添加meta标签

在文件目录下找到public文件夹下的index.html
在标签添加 style=“font-size: 10vw”

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

在标签内添加

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

4.重启服务器即可

npm run serve

转载链接: https://www.jianshu.com/p/6f14e761ddae.

frsgshth
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解Vue-cli webpack移动端自动化构建rem问题
12-12
相信很多小伙伴想着自己的移动端项目能够自动转换为rem，这才符合前端的潮流，如果用自己手写或者编辑器插件来改动十分不方便还容易出错，我在网上找了很多的方法发现以下问题： 1 照着老的视频教程去弄，发现node ...
vue-cli3 + vant + postcss-px2rem实现移动端页面.docx
09-06
vue-cli3 + vant + postcss-px2rem实现移动端页面
vuecli4手机端 px自适应配置 （px转rem）
Alone patients的博客
08-19 358
npm install amfe-flexible --S npm install postcss-pxtorem --S 在vue.config.js里面配置 ；如果没有这个文件夹在根目录下面创建一个 module.exports = { css: { loaderOptions: { postcss: { plugins: [ require("autoprefixer")({ // 配置使用
Vuecli4最新移动端（px转rem）适配方法
andrewtroye的博客
04-01 549
Vuecli4最新移动端（px转rem）适配方法 首先安装脚手架 1.先确认是否有安装过vue-cli，输入vue -V（大写） //如有的话，就用下面命令卸载； 2. 输入命令 cnpm install -g @vue/cli 指定版本: 如果是3.0以下 npm install -g vue-cli@版本号 如果是3.0以上 npm install -g @vue/cli@版本号 创建和初始化项目 vue create (你的项目名) 回车键确认执行，空格键进行选择所需要的配置 选择自定义配置 ma
vue cli 4.x 自动把px转换为rem
weixin_42553179的博客
01-21 1362
安装 npm i lib-flexible postcss-px2rem --s 1、在根目录添加postcss.config.js文件 module.exports = { plugins: { autoprefixer: {}, "postcss-px2rem": { remUnit: 37.5, // 50px = 1rem remPrecision: ...
vue-cli4.x 配置pc端px转rem
qq_42386231的博客
06-08 252
vue-cli4.x 配置pc端px转rem 安装依赖并在main.js中引入该依赖 npm i amfe-flexible npm i postcss-px2rem import "amfe-flexible" 在package.json中配置 "postcss": { "plugins": { "autoprefixer": {}, "postcss-px2rem": { ​ "remUnit": 192 //设计稿的除以10得到适配范围 } } }
Vue-cli 将px转化为rem
王龙鑫的博客
11-22 483
vue-cli2版本配置 1.下载lib-flexible 我使用的是vue-cli+webpack，所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible/flexible' 3.设置meta标签 通过meta标签，设置设备宽度以及缩放比例 &l...
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' ...
基于vue-cli配置lib-flexible + rem实现移动端自适应
11-30
使用 webpack 的 px2rem-loader,自动将px转换为rem 安装px2rem-loader npm install px2rem-loader --save-dev 配置px2rem-loader 在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加配置 关于...
vue移动端实现px自动转换rem？
weixin_44632257的博客
07-17 153
第一步安装 npm install lib-flexible px2rem-loader -S 第二步：在 main.js中引入 import ‘lib-flexible/flexible’ import 'lib-flexible/flexible' 第三步：修改build/utils.js如下 const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 37.5 } } function generateL
vue-cli4.x使用rem
weixin_46939955的博客
11-17 206
1.安装两个插件 npm i amfe-flexible npm i postcss-px2rem 2.main.js引入 import rem from 'amfe-flexible' Vue.use(rem) 3.package.json 中添加如下代码 "postcss":{ "plugins":{ "autoprefixer":{}, "postcss-px2rem":{ "remUnit":75 } } } over.
vue使用rem来实现移动端自适应布局
asteriaV的博客
12-04 1110
现在手机屏幕分辨率越来越多，为了适应屏幕不同大小，我们首先要做到的便是页面布局自适应。 当然解决方案很多，比如：百分比布局，弹性布局flex，也都能获得不错的效果，这里主要介绍的是本人在实践中用的最高效的布局方案——rem布局 一，设置初始的rem值 用js计算来实现rem，只需要全局引入下面这段原生js代码即可 <script> (function (d...
vue移动端自适应布局
weixin_49813550的博客
11-13 2149
vue移动端适配
vue-cli3实现移动端自适应
weixin_43915587的博客
06-19 4454
1、安装 flexible和 postcss-px2rem（命令行安装） npm i ib-flexible --save npm i postcss-px2rem --save flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。 例如在Galaxy S III: 例如在iphone6/7/8:...
在vue-cli4中移动端的自适应：amfe-flexible和px2rem-loader
qq_31403519的博客
02-13 3011
1、首先在项目中安装以下依赖 npm install px2rem-loader --save npm install amfe-flexible --save npm install postcss-px2rem --save 2、在main.js中添加： import 'amfe-flexible' 3、在vue.config.js中进行配置 module.exports = ...
Vue 实现PC端和移动端的自适应
yiyueqinghui的博客
08-16 9934
1、Vue 实现PC端和移动端的自适应 步骤如下： 1.1、 安装lib-flexible npm i lib-flexible --save 1.2、 main.js 里 引入 lib-flexible import 'lib-flexible' 1.3、 在项目根目录的 index.html 中添加如下 meta <meta name="viewport" content="width=device-width, initial-scale=1.0"> 1.4、安装px2rem-lo
Vue-cli 将px转化为rem，适配移动端（vue-cli2.x 和 vue-cli3中的使用）
热门推荐
ShiYadong的专栏
01-31 1万+
一. Vue-cli2.x中的用法 1.下载lib-flexible 我使用的是vue-cli+webpack，所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible/flexible' 3.设置meta标签 通过meta标签，设置设...
vue3.0实现移动端自适应
祈盼的博客
04-01 5973
vue3.0实现移动端自适应 项目使用vue3.0编写代码，说要打包成apk文件，在安卓上看，现在需要适配移动端的样式，记录一下，亲测有效。 安装插件 vue脚手架略过 lib-flexible : 会自动在html的head中添加一个<meta name="viewport">的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px
vuecli3 如何配置 px2rem-loader
最新发布
05-27
要在 Vue CLI 3 中使用 `px2rem-loader`，可以按照以下步骤进行配置： 1. 安装 `px2rem-loader` 和 `postcss-loader`： ``` npm install px2rem-loader postcss-loader --save-dev ``` 2. 在项目根目录下创建一个 `postcss.config.js` 文件，并添加以下代码： ``` module.exports = { plugins: { 'postcss-px2rem': { remUnit: 75 // 设置 1rem 等于 75px } } } ``` 3. 在 `vue.config.js` 文件中添加 `css.loaderOptions.postcss` 配置项： ``` module.exports = { css: { loaderOptions: { postcss: { plugins: [ require('postcss-px2rem')({ remUnit: 75 // 设置 1rem 等于 75px }) ] } } } } ``` 4. 在组件中的样式中使用 px 单位，`px2rem-loader` 会自动将其转换为 rem 单位。 需要注意的是，`px2rem-loader` 只会转换 `.css` 或 `.less` 等样式文件中的 px 单位，如果你在 `.vue` 文件中的 `style` 标签中使用了 px 单位，也需要进行转换。如果你使用了 `sass` 或 `scss` 等预处理器，需要安装对应的插件并按照它们的要求进行配置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值