vue中pc端大屏怎么进行rem适配(lib-flexible + postcss-pxtorem)

2023-11-14

使用 插件 lib-flexible postcss-pxtorem 进行是适配,一共是两个步骤,当我们在进行适配的时候,如果只将当前屏幕分成几份的话,那么在后面写样式的时候,样式的单位需要写成rem ,但是这里我们在进行完 postcss-pxtorem 适配之后,他会自动将我们写的 px 单位转化成 rem 的单位

插件作用:

        lib-flexible:自动将当前屏幕分成十分之一

        postcss-pxtorem :将 px 自动转化成 rem(注意:不能转化行内样式的单位)

废话不多说,先来看适配步骤

配置 lib-flexible 

    1. 下载 lib-flexible 包

npm i lib-flexible@0.3.2 -S

    2. 配置

        a. 在 node_modules 中找到 lib-flexible 包文件

        b. 找到 flexible.js 文件,搜索 540,在下面函数中将 540 改成 width,然后 html 的 font-size 就会变成当前屏幕的 十分之一

配置 postcss-pxtorem

    1. 下载 postcss-pxtorem 包

    2. 在根路径中 (与 main.js 平级) 创建 .postcssrc.js 文件

        a. 在该文件中配置,并修改 rootValue的值

// postcss 配置文件
module.exports = {
  // 配置需要使用的postcss插件
  plugins: {
    'postcss-pxtorem': {
      rootValue: 144,   // 这里应该 UI 图的十分之一
      propList: ['*']
    }
  }
}

然后下面就可以根据 UI 的图直接写了

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue中pc端大屏怎么进行rem适配(lib-flexible + postcss-pxtorem) 的相关文章

  • 如何在 ChartJS 中创建自定义图例

    我需要使用 ChartJS 库为我的圆环图创建自定义图例 我已经使用 ChartJS 提供的默认图例创建了甜甜圈 但我需要一些修改 我希望其价值高于汽车名称 另外 我不喜欢粘性图例 我想将其与甜甜圈分开 这样我就可以更改字体 框的样式 例如
  • Vue.JS 可以与 AJAX http 调用一起使用吗?

    我正在尝试从 HTML 中执行以下操作 var vm new Vue el loginContent data main message Login isLoggedIn false loginError loginButton Login
  • Vuejs2 Modal 与 vue-router 中的路线

    我正在尝试使用模态创建一条路由 当您使用路由器链接访问此路由器路径时 会在当前页面上方显示一个模态 或者如果我直接从 url 访问 则会出现上面带有模态的索引 例如 我在http localhost 个人资料 1 http localhos
  • Vue模板-渲染HTML特殊字符代码

    如何在我的 Vue 模板中完全渲染 HTML 特殊字符代码 例如我有这个 JSON 数据 id post91 slug null title Breakfast 038 Tea 我怎样才能转换Breakfast 038 Tea to Bre
  • 使用 Vercel 进行 Vue.js 历史记录模式的服务器配置?

    我设置了一个非常基本的 Vue js 应用程序 主要使用这些步骤 https auth0 com docs quickstart spa vuejs 01 login 当我将路由器添加到该项目时 它询问我是否要使用历史模式 我说是 现在我正
  • 如何在卡组bootstrap vue上设置行列?

    我的 vue 组件是这样的
  • Vue js按钮冻结dom

    我试图在按下按钮时切换包含加载动画的跨度 直到使用 v if 函数完成 但是当我按下按钮时 DOM 冻结并且 span 元素保持不变 直到函数调用结束 如何让 DOM 不冻结并显示加载图标 非阻塞按钮按下可能是一个解决方案 HTML
  • 如何在Vuejs中动态管理页面标题?

    我构建一个应用程序 我有一个带有页面标题的标题 目前 我使用视图路由器来定义我的标题 path events name events component Events meta title Liste des v nements 在我的刀片
  • Vue 3 控制台中的 Proxy 是什么意思?

    我正在对数组进行洗牌 并在控制台中收到一条奇怪的消息 我的 JSON 文件如下所示 id 1 name Sushi image https images pexels com photos 1640777 pexels photo 1640
  • Laravel VueJS:构建多页面应用程序而不诉诸单页面应用程序(SPA)方法

    我正在尝试构建 Laravel 5 5 VueJs 多页面应用程序 我不想使用 SPA 单页应用程序 方法使其看起来像是一个多页面应用程序 URL处的注册页面就是这种情况 register 通过命令php artisan make auth
  • Nuxt.js 多个资源的根路由和根级 slugs

    我正在使用 Nuxt 构建一个电子商务前端 我希望为尽可能多的资源提供根级 slugs 最重要的是目录路径和产品 URL 一个明显的方法是使用 Nuxt 文件结构进行路由创建 com category men Tshirt com cate
  • 未向导出的模块提供此上下文

    我对问题的提出感到不满意 受到鼓励提出改进建议 另外 请记住 由于无知 无知导致烦恼 我对问题的诊断可能有缺陷 对于那个很抱歉 In 这个答案 https stackoverflow com a 40893583 1525840建议使用th
  • FontAwesome SVG 图标与 Vuetify - 如何在 v-icon/prepend-icon 中使用?

    我是 Vue 新手 找不到如何在 v icon 和 prepend icon 中使用 FA SVG 图标的确切答案 如果我使用
  • Vue 监听 Vuex 提交吗?

    有没有一种方法可以监听 Vuex 提交 而不观察任何随提交而更改的属性 只是简单地找出是否发生了提交 我有一个 Filter 组件 想将其放入 NPM 包中 但我已经有一个用例 在该用例中 我希望设置一个 cookie 在选择过滤器时存储过
  • 在 Vue.js 中隐藏 div onclick

    以下 jQuery 的 Vue js 等价物是什么 btn click function hideMe hide jQuery 开箱即用 而 Vue js 则不然 要初始化 Vue js 组件或应用程序 您必须将该组件及其数据绑定到模板内的
  • Vue中有类似React.Fragment的东西吗?

    在 React 中我可以做这样的事情 parent component export default return div div 1 div div
  • 不知道如何预览我生成的 Nuxt3 应用程序

    我刚刚在静态模式下创建了一个 Nuxt3 但我不想每次都将其推送到 Netlify 进行预览 这是我的nuxt config js 没有改变 import defineNuxtConfig from nuxt export default
  • 使用 Vue 的多模式组件

    我在 Vue 中实现动态模式组件时遇到问题 A common approach I follow to display a set of data fetched from the db is I dump each of the rows
  • Vue 和 Vuex:处理依赖的计算属性

    我的应用程序是一个使用 Vuex 在 Vue 中构建的精简电子表格 关键组件是TableCollection Table and Row The TableCollection有一个包含多个的数组Table对象 每个Table有一个包含多个
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev

随机推荐

  • windows10复制粘贴键突然失效 的一个最简单的解决方法

    今天复制粘贴键突然失效 在网上捣鼓了好多方法都不行 最后发现 看看你有没有在用加密视频 有就把它关了 关了就好了
  • react-router-dom的路径匹配 属性exact 与strict

    在这里先介绍一个比较难以描述的坑 在使用react router的时候我首先就是先在react router的官网上去看她的官方文档 然后按照上面的教程来在自己的react工程中使用react router 但是基本应该会遇到问题 原因就是
  • 小程序---365笔记第11天---微信小程序登录接入

    接入前的准备工作参考文档 微信小程序登录接入 必做 登录逻辑 小程序登录逻辑梳理 使用插件参考文档 https developers weixin qq com miniprogram dev framework plugin using
  • windows下WS2tcpip.h和windows.h报错

    include
  • java.lang.NoClassDefFoundError: com/sun/tools/javac/processing/JavacProcessingEnvironment

    最近做项目遇到场景 通过前端提交的JAVA代码 创建java文件 然后再编译JAVA文件称class文件 具体实现的细节 就不细说了 最后执行的结果能正常执行 但控制台报错 Can t initialize javac processor
  • Zotero

    用户笔记区代码问题 用户笔记区用于记录阅读文献中的总结 是很重要的笔记模块 Zotero IF 插件提供了obsidian用户笔记区这一功能 很有用 但经本人实际使用发现 Zotero IF插件官网给的用户笔记区模板并不实用 主要存在以下几
  • 【牛客刷题专栏】0x32:JZ45 把数组排成最小的数(C语言编程题)

    前言 个人推荐在牛客网刷题 点击可以跳转 它登陆后会保存刷题记录进度 重新登录时写过的题目代码不会丢失 个人刷题练习系列专栏 个人CSDN牛客刷题专栏 题目来自 牛客 题库 在线编程 剑指offer 目录 前言 问题描述 解法思路 代码结果
  • 数字信号带宽讲解

    引言 在学习和工作中 经常和数字信号打交道 但是经常会接触到数字信号的带宽 对于这一概念 我理解的并不是很透彻 所以今天来抽丝剥茧 把这一概念彻底理解清楚 内容引申 要理解数字信号带宽 就先要了解信号的上升时间 上升时间 上升时间的概念 任
  • Win定时任务更新SVN库

    找到计算机管理 右击任务计划程序库 gt 创建基本任务 填写好名称和描述 NEXT NEXT NEXT 这里选择好svn exe 参数配置成 update D your dictionary NEXT 设置属性 选择触发器 gt 编辑 设置
  • 修改docker容器中文件(配置文件)

    背景 在使用docker搭建hadoop时需要修改docker容器里的文件 不想装ubutu所以在容器里用不了vim命令修改文件 1 查看所有容器名称和基本信息 docker ps 2 查看某个容器信息 docker inspect 容器名
  • 了解数据库的作用、特点及关系型数据库管理系统

    学习目标 能够知道数据库的作用数据库和数据库管理系统的关系 一 数据库 1 数据库的介绍 数据库就是存储和管理数据的仓库 数据按照一定的格式进行存储 用户可以对数据库中的数据进行增加 修改 删除 查询等操作 2 数据库的分类 关系型数据库
  • 干货渗透测试面试题汇总

    干货 渗透测试面试题汇总 以下为信息安全各个方向涉及的面试题 星数越多代表问题出现的几率越大 没有填答案是希望大家如果不懂能自己动手找到答案 祝各位都能找到满意的工作 注 做这个List的目标不是全 因为无论如何都不可能覆盖所有的面试问题
  • c++,父类引用指向子类对象,虚函数

    include
  • 还不错的全民采矿小程序源码+代码已开源

    正文 还不错的全民采矿小程序源码 代码已开源 可配合流量主和激励视频 程序是单开版的 一个站点只能单个平台使用此应用 一个小程序使用此应用 下方图片是小程序工具介绍 下方是程序介绍 程序 lanzou com iRgwE04a5d0d 图片
  • 基于嵌入式Linux/Qt 开发RFID智能仓储指纹管理系统

    基于嵌入式Linux Qt 开发RFID智能仓储指纹管理系统 Qt 是一个用于桌面系统和嵌入式开发的跨平台应用程序框架 它包括一个直观的API和一个丰富的类库 以及用于GUI开发和国际化的集成工具 另外它支持Java 和C 开发 利用它 我
  • AIX下装unzip和gzip

    做个标注 AIX下安装oracle需要解压zip文件 所以需要安装unzip文件包 首先确定aix里有没有rpm rte包 lslpp l grep i rpm rte 如果没有的话需要用aix安装盘安装这个包 我的系统里现在有这个包了 就
  • Deque与Stack实现栈的区别

    使用Deque 允许两头都进 两头都出 这种队列叫双端队列 Double Ended Queue 简称Deque Java集合提供了接口Deque来实现一个双端队列 它的功能 既可以添加到队尾 也可以添加到队首 既可以从队首获取 又可以从队
  • Cloudstack常用端口(Ports used by CloudStack)

    Cloudstack常用端口 Ports used by CloudStack 管理服务器 8080 主界面 授权API端口 8096 用户 客户端连接CS管理端 不可靠的 8787 CloudStack Tomcat debug sock
  • 华为OD机试真题- 基站维修工程师【2023Q1】【JAVA、Python、C++】

    题目描述 小王是一名基站维护工程师 负责某区域的基站维护 某地方有n个基站 1
  • vue中pc端大屏怎么进行rem适配(lib-flexible + postcss-pxtorem)

    使用 插件 lib flexible 和 postcss pxtorem 进行是适配 一共是两个步骤 当我们在进行适配的时候 如果只将当前屏幕分成几份的话 那么在后面写样式的时候 样式的单位需要写成rem 但是这里我们在进行完 postcs