首页 > 其他分享 >使用750设计稿,px转vw,同时兼容vant

使用750设计稿,px转vw,同时兼容vant

时间:2023-07-25 19:15:12浏览次数:26  
标签:750 vant px vw postcss viewport

vant官网上推荐使用postcss-px-to-viewport 进行转换。

postcss-px-to-viewport 是一款 PostCSS 插件,用于将 px 单位转化为 vw/vh 单位。

因为vant自身使用的是375大小,网上其他的资料也都用375,可是自己使用的是750设计稿,所以想用750的执念就起来了,研究了一番配置如下。

npm install postcss-px-to-viewport --save-dev
// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 750, // vant是用375设计稿
      exclude: [/node_modules\/vant/] // 这里排除对vant的转换
    },
  },
};

标签:750,vant,px,vw,postcss,viewport
From: https://www.cnblogs.com/maodx/p/17580693.html

相关文章

  • 排查mysql pxc集群故障节点
    排查MySQLPXC集群故障节点MySQLPXC(PerconaXtraDBCluster)是一个高可用性的数据库集群解决方案,它基于MySQL和GaleraCluster技术实现。在实际运行中,可能会遇到一些节点故障的情况,本文将介绍如何排查MySQLPXC集群的故障节点,并给出相应的代码示例。1.检查集群状态在排......
  • vant组件没有被更新
    环境:uniapp、vue3、vant-weapp<template> <van-field:value="content"></van-field> <view>{{content}}</view></template>修改content,但van-field并没有跟着发生变化,而下面的{{content}}变化了。这可能是vant-weapp本身的问题。查看源码后发现,van-field的val......
  • 130-vant案例-07-定义错误页面
    定义错误页面#1.配置路由#2.定义页面组件#3.访问不存在的路由会跳转错误页面1.定义路由index.jsimportNotFoundfrom'../views/NotFound.vue'//错误页面,优先级最低{path:'/:pathMatch(.*)*',///:占位符,后面可以随便写/:aa,/:bb;(.*)*:......
  • 2000元内最超值游戏处理器!锐龙5 7500F首发评测:轻松超频5.6GHz游戏追平i5-13600K
    一、前言:首款不带核显的锐龙7000处理器以往的桌面锐龙处理器,带核显型号的很少,而到了Zen4时代,此前已上市的锐龙7000系列处理器都集成了核显。现在,AMD锐龙57500F来了,这是AMD首款F系列处理器,也是首款不带核显的Zen4构架处理器。要注意一点,AMD锐龙57500F并不是中国专供款产品,不......
  • P3750 [六省联考 2017] 分手是祝愿
    本篇为该题解的补充与说明处理出来一共有个多少的要摁的开关(最优的方法是摁多少次)我们可以先从\(k\)入手,从后往前扫,只要遇到\(1\)的位置就操作,并更新编号为\(i\)的约数的点一个点不会被操作\(2\)次以上,因为\(2\)次操作相当于没操作操作\(i\)不会影响到比ii......
  • 1.使用jquery两种方式实现设置页面中的div元素的宽度为200px,高度为200px,背景颜
    使用jQuery两种方式实现设置页面中的div元素的宽度为200px,高度为200px,背景颜色整体流程为了实现这个目标,我们需要按照以下步骤进行操作:引入jQuery库文件使用第一种方式实现设置div元素样式使用第二种方式实现设置div元素样式步骤详解1.引入jQuery库文件首先,我们需要在HT......
  • P3750 [六省联考 2017] 分手是祝愿 做题记录
    P3750[六省联考2017]分手是祝愿做题记录题目传送门题目描述ZeitundRaumtrennendichundmich.时空将你我分开。B君在玩一个游戏,这个游戏由\(n\)个灯和\(n\)个开关组成,给定这\(n\)个灯的初始状态,下标为从\(1\)到\(n\)的正整数。每个灯有两个状态亮和灭,......
  • 使用mpx创建小程序并使用tailwind
    #cli创建项目mpxcreatempx-project#切换到新的mpx-project中cdmpx-project把 @mpxjs/webpack-plugin 版本改为 2.8.32#安装包yarn执行:yarnadd-Dtailwindcssweapp-tailwindcss-webpack-pluginpostcss-rem-to-responsive-pixel安装 weapp-tailwindcss#......
  • 20090408_每年放生750次 嚴重威脅生態環境(報導)
    根據台灣動物社會研究會的調查,台灣每年宗教放生活動高達750次,平均每天2.1次。調查統計,被放生的動物中有不少是外來物種,嚴重威脅生態環境。台灣動物社會研究會今天召開記者會,公布2009年「台灣放生現象調查」結果指出,經常被放生動物的地點不乏熱門景點,像是淡水漁人碼頭、日月潭、旗......
  • TryHackMe | Relevant Writeup
    TryHackMe|RelevantWriteup信息收集有2个Web服务(80/tcp、49663/tcp)以及网络共享(445/tcp和rdp的3389端口。有个nt4wrksv,连接看看有一个密码文件,打开是base64解码Bob-!P@$$W0rD!123Bill-Juw4nnaM4n420696969!$$$ 想着拿密码先连接一波,直接就开始连接3389,......