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

我这边的需求是微信小程序嵌套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%;
}

能不能搞?怎么搞?

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

CSS:

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

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

  • 官方API:wx.miniProgram

    function isWeChatMiniProgram() {
      return typeof wx !== 'undefined' && wx.miniProgram;
    }
  • 然后我们可以给定特殊 css 样式类,例如 .wx 来实现微信端和 pc 端的样式分离

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题