时间戳

首页 > 解决方案 > 我应该使用 CSS 还是 Javascript 来显示取决于屏幕大小的信息？重要吗？

javascript - 我应该使用 CSS 还是 Javascript 来显示取决于屏幕大小的信息？重要吗？

问题描述

我想知道根据设备的屏幕尺寸选择要显示的信息<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;
   }
}

任何建议将不胜感激（提前致谢）

标签： javascriptcssmobileresponsive-design

解决方案

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

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

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

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

推荐阅读