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将是最好的选择。

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

是否应该使用CSS或Javascript显示取决于屏幕大小的信息？有关系吗？

4 个答案: