css的media query可以自定义吗？结合js，像css变量一样？

Question

我这边的需求是微信小程序嵌套web页面，web页面有多端在用，我需要判断是否是移动端做样式的兼容。
比如下面是判断是移动端的media query，我会设置不同的样式。

@media only screen and (hover: none) and (pointer: coarse) {
    /* 移动端*/
    width: 100%;
}

但是微信小程序不符合这个media query，被判断为pc端，导致样式错乱。

而判断微信小程序环境，官方给的都是js的方式。

我当然可以通过js判断然后给不同的样式，但是因为移动端兼容逻辑都写完了，我不想改动太多，最简单的方式就是js判断是否微信小程序环境，然后结合media query，比如

@media only screen and (hover: none) and (pointer: coarse) or 微信小程序 {
    /* 移动端*/
    width: 100%;
}

能不能搞？怎么搞？

Answer 1

if (isWeChatMiniProgram) { // 这里要替换成你的判断微信小程序的逻辑
  document.body.classList.add('wechat-mini-program');
}

CSS:

@media only screen and (hover: none) and (pointer: coarse), .wechat-mini-program {
  /* 移动端*/
  width: 100%;
}

Answer 2

看完问题，没理解错的话，题主只需要知道如何判断运行环境是否为小程序端

• 官方API：wx.miniProgram

  function isWeChatMiniProgram() {
    return typeof wx !== 'undefined' && wx.miniProgram;
  }

• 然后我们可以给定特殊 css 样式类，例如 .wx 来实现微信端和 pc 端的样式分离

Answer 3

你可以参考一下主题切换, 就弄个顶级class 进行属性切换就行,和你用media差不多逻辑,你照着弄就行