css样式判断，怎么处理

img

在APP这个vue文件中，有几个选择器得样式 需要通过判断来处理，

我需要根据用户是登录得PC还是移动端来处理我写得这个样式

模板是这样得

<md-selector v-model="isNationShow" default-value="@@@@Z710000000005L2S" :data="nationStatusList" max-height="320px"
        title="请选择" large-radius @choose="onNationChoose" />

img


无法设置到这一层

该回答引用GPTᴼᴾᴱᴺᴬᴵ
可以使用媒体查询（Media Query）来根据设备的屏幕大小或者设备类型（如PC端、移动端等）来设置样式。

例如，在你的代码中，可以这样设置：

@media (min-width: 768px) { /* 大于等于 768px 的屏幕 */
  /* PC端样式 */
  .md-selector md-popup,
  .md-tab-picker .md-popup,
  .md-picker .md-popup {
    left: 29.5%;
    right: 29.5%;
  }
}

@media (max-width: 767px) { /* 小于 768px 的屏幕 */
  /* 移动端样式 */
  .md-selector md-popup,
  .md-tab-picker .md-popup,
  .md-picker .md-popup {
    left: 0;
    right: 0;
  }
}

这样就可以根据屏幕大小来判断是PC端还是移动端，并分别设置不同的样式了。你可以根据实际情况调整媒体查询中的屏幕大小阈值。

用 class 绑定 或者 style 绑定写样式，用一个变量去控制，识别PC 或移动端 然后控制样式的变化

如果你需要根据用户是登录的PC还是移动端来处理选择器的样式，可以考虑使用Vue中的计算属性（computed property）或者watcher来实现。

首先，你可以通过检测浏览器的User-Agent来判断用户是在移动端还是PC端。一般来说，移动端的User-Agent中会包含一些移动设备的标识，例如Android、iPhone、iPad等等。

然后，你可以在Vue组件中定义一个计算属性，根据浏览器的User-Agent返回相应的选择器样式。例如：


computed: {
  selectorStyle() {
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
      // 移动端选择器样式
      return {
        /* 移动端样式 */
      }
    } else {
      // PC端选择器样式
      return {
        /* PC端样式 */
      }
    }
  }
}

在模板中，你可以使用这个计算属性来设置选择器的样式。例如：

<template>
  <div :style="selectorStyle">
    <!-- 其他代码 -->
  </div>
</template>

这样，Vue会根据计算属性的返回值来动态地设置选择器的样式。