css样式判断，怎么处理

Question

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

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

模板是这样得

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

无法设置到这一层

Answer 1

该回答引用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端还是移动端，并分别设置不同的样式了。你可以根据实际情况调整媒体查询中的屏幕大小阈值。