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

  • Z时代
  • 2024-02-07
  • 分类：IT

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

能不能搞？怎么搞？

回答：

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差不多逻辑,你照着弄就行

以上是 css的media query可以自定义吗？结合js，像css变量一样？ 的全部内容， 来源链接： utcz.com/p/934624.html

回到顶部