在移动设备上删除对象

Question

对于我的站点，我有一个登录屏幕，底部有一个页脚。该页面针对桌面显示器进行了优化，并且网站本身已经针对 PC 和移动设备进行了优化，因此我不想经历创建新移动版本的麻烦。

我不太擅长使用脚本，这就是我在这里提问的原因： 当屏幕尺寸小于 400px 时，我可以制作一个删除页脚的脚本吗？

这里有一些问题的照片，也许你们可以给我一个解决方案？提前致谢！

Answer 1

使用CSS @media:

/* From 0 to 992px Device Width */
@media (max-width: 992px)  {

   #footer {
       display: none;
       // Other styles here
   }

}

Answer 2

如果您正在使用 Bootstrap：

超小型手机（<768px）（Class 名称：.visible-xs-block、hidden-xs）

小型设备平板电脑（≥768px）（Class 名称：.visible-sm-block、hidden-sm）

中型设备桌面（≥992px）（Class 名称：.visible-md-block、hidden-md）

大型设备台式机（≥1200px）（Class 名称：.visible-lg-block、hidden-lg）

如果您不是，您将需要为您的页脚添加@media 查询，假设您的页脚 class 是 .footer。它的媒体查询如下：

@media screen and (max-width: 480px) {
    .footer {
        display: none;
    }
}

Remove an object when on mobile