element ui 基于断点的隐藏类是怎么做响应式的呢？

Question

我个人看文档觉得是类似在需要的地方写两遍网页结构，然后用他的 display.css 提供的各种断点隐藏来把其中一个设置为视口小于某个值时隐藏，另一个设为大于某个值时隐藏。
类似

    <!-- 宽度大于768px时隐藏 -->
    <div class="hidden-sm-and-up"></div>
    <!-- 宽度小于768px时隐藏 -->
    <div class="hidden-xs-only"></div>

但他那个 display.css 文件内部实现是：

@media only screen and (max-width: 768px) {
  .hidden-xs-only {
    display: none !important;
  }
}

@media only screen and (min-width: 768px) {
  .hidden-sm-and-up {
    display: none !important;
  }
}

这就导致了当屏幕宽度正好是 768px 时，这两个媒体查询都会被应用，这两个结构也都会被隐藏。
而我的开发工具告诉我 ipad 的视口正好是 768px。

我试过把 .hidden-sm-and-up 的视口调成 769px，768px 就不会应用两个媒体查询了。

但是我开始疑惑是不是我理解错了，这个断点隐藏类是不是有着其他的使用方法？

Answer 1

你不需要用两个媒体查询。
可以在正常情况下让 hidden-sm-and-up隐藏，hidden-xs-only显示
（宽度大于768px时为正常情况下）

@media only screen and (max-width: 768px)时再反过来，让 hidden-sm-and-up显示，hidden-xs-only隐藏

<style type="text/css">
.hidden-xs-only {
    display: block;
}
.hidden-sm-and-up {
    display: none;
}

@media only screen and (max-width: 768px) {
  .hidden-xs-only {
    display: none !important;
  }

  .hidden-sm-and-up {
    display: block !important;
  }
}

</style>

如有帮助，望采纳！谢谢!