Question

我有按钮1和按钮2.如果我在电脑屏幕上，我必须显示按钮1，相反，如果我在手机/平板电脑设备中，我必须显示按钮2。所以，我想要一些可以改变我页面中可见html的东西。有一些像html的mediaquery？提前谢谢！

Answer 1

是的，媒体查询可用于获得您想要的结果。但是你在css风格的工作表中使用它们。

这样的事情：

@media only screen and (max-width : 480px) {
  .btn-mobile-visible {
      visibility: visible;
  };

  .btn-desktop-visible {
      visibility: hidden;
  };    
}

@media only screen and (min-width : 481px) {
  .btn-mobile-visible {
      visibility: hidden;
  };

  .btn-desktop-visible {
      visibility: visible;
  };   
}

然后在你的html中你只需在你的按钮上添加css-classes：

<button class="btn-desktop-visible">Visible in desktop</button>
<button class="btn-mobile-visible">Visible in mobile</button>

如果用户更改了他/她浏览器窗口的大小，可能会产生不必要的副作用 - 这可能会让事情变得有点混乱：）

Answer 2

您只需使用css媒体查询更改按钮的可见性即可。或者使用像head.js这样的库来确定您所使用的浏览器类型，然后通过javascript插入正确的按钮。

在移动设备/平板电脑上更改HTML

2 个答案: