我应该使用CSS或JavaScript显示依赖屏幕大小的信息吗?有什么关系

Question

我想知道，在选择显示哪些信息<video>或<img>标签时，根据设备的屏幕尺寸，将更正确。想知道使用CSS或JavaScript或其他一些方法

是否会更好

使用JavaScript是

的更好练习

var screenSize = screen.width;
if (screenSize >= 500) {
    //display image or video or text
} else if (screenSize >= 1000) {
   //dislpay a different image or video or text
} else {
   //display something different
}

或愿意使用CSS媒体查询

之类的东西

@media only screen and (max-width: 0) {
   .mobile-version{
      display:block
   }
   .tablet-version{
      display:none;
   }
   .desktop-version{
      display:none;
   }
}
@media only screen and (max-width: 500) {
    .mobile-version{
      display:none;
   }
   .tablet-version{
      display:block;
   }
   .desktop-version{
      display:none;
   }
}
@media only screen and (max-width: 1000) {
    .mobile-version{
      display:none;
   }
   .tablet-version{
      display:none;
   }
   .desktop-version{
      display:block;
   }
}

任何建议都将不胜感激(谢谢(

Answer 1

我认为这是一个偏好问题，取决于您的应用程序。

如果您打算拥有包含某种逻辑的更复杂或动态元素，则JavaScript可能更适合并为您提供更多的控制。也许您想拥有用户偏好，例如自动播放/关闭视频，等等。

但是，如果您只想执行简单的有条件显示，那么CSS是您的朋友。

我的建议是为您选择最简单的解决方案，这似乎是CSS，并避免在单个应用程序中混合两者。

Answer 2

为了完成您想要完成的目标，我不得不说媒体查询，因为它们要设置/调整多么简单。为什么要重新发明轮子？

Answer 3

使用JavaScript是...

的更好练习

继续使用CSS ，因为它旨在解决您的问题。

但是，您还提到使用<video>标签。尽管用于使用CSS调整HTML标签的大小就足够了，但您可能需要使用JavaScript 将所需的分辨率传递给视频播放器，具体取决于视口大小。特别是，如果您有相同视频的多种分辨率。(您不想在640x320框中播放1080p(在这种情况下，您可以使用window.outerWidth，window.innerWidth，document.documentElement.clientWidth获得屏幕宽度。所有这些产生不同的结果，但是第二个将为您提供与CSS断点相同的值。

Answer 4

我认为这取决于您的应用程序或项目。如果要显示动态元素或逻辑，则JavaScript是一个不错的选择，对于简单的条件显示，CSS将是最好的选择。

我认为媒体查询足以显示有条件的元素。