H5 适配

H5 适配开发

2022年6月6日vite编译显示插件弃用

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide: https://evilmartians.com/chronicles/postcss-8-plugin-migration

解决方式:

  1. 安装新的postcss-px-to-viewport-8-plugin
npm install postcss-px-to-viewport-8-plugin --save-dev
其他配置如下
新建:postcss.config.cjs
  module.exports = {
    autoprefixer: {}, 
    plugins: {
      'postcss-px-to-viewport-8-plugin': {
        unitToConvert: 'px', // 需要转换的单位,默认为"px"
        viewportWidth: 750, // 设计稿的视口宽度
        unitPrecision: 5, // 单位转换后保留的精度
        propList: ['*','!font-size'], // 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被转换
        viewportUnit: 'vw', // 希望使用的视口单位
        fontViewportUnit: 'vw', // 字体使用的视口单位
        // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
        // 下面配置表示类名中含有'keep-px'都不会被转换
        selectorBlackList: ['keep-px'], 
        minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
        mediaQuery: false, // 媒体查询里的单位是否需要转换单位
        replace: true, //  是否直接更换属性值,而不添加备用属性
        exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
        include: [/src/], // 如果设置了include,那将只有匹配到的文件才会被转换
        landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
        landscapeUnit: 'vw', // 横屏时使用的单位
        landscapeWidth: 1338, // 横屏时使用的视口宽度
      },
    },
  };
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Dark Mode 是一种较新的设计趋势,它可以在不同操作系统或应用程序中自动切换白天或黑夜模式。如果您想禁用Dark Mode并始终使用浅色主题,可以按照以下步骤: 1. 在<head>标签中添加以下元标记: ```html <meta name="color-scheme" content="light"> ``` 2. 在<style>标签中添加以下样式规则: ```html @media (prefers-color-scheme: dark) { body { color: black; background: white; } } ``` 这样设置后,无论用户的操作系统或浏览器是否启用 Dark Mode,都将强制使用浅色主题。 如果您希望您的网站能够自应 Dark Mode 主题,可以使用 CSS 变量和 JavaScript 来实现。以下是一些示例代码: 1. 使用 CSS 变量 ```css :root { --background-color: white; --text-color: black; } @media (prefers-color-scheme: dark) { :root { --background-color: black; --text-color: white; } } body { background-color: var(--background-color); color: var(--text-color); } ``` 2. 使用 JavaScript ```javascript const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)"); if (prefersDarkScheme.matches) { document.documentElement.style.setProperty('--background-color', 'black'); document.documentElement.style.setProperty('--text-color', 'white'); } else { document.documentElement.style.setProperty('--background-color', 'white'); document.documentElement.style.setProperty('--text-color', 'black'); } ``` 这些代码将根据用户的操作系统设置,自动切换网站的主题。您可以将 CSS 变量和 JavaScript 代码放在单独的文件中,并在<head>标签中引用它们,以便在整个网站中重用它们。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不听念经

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值