HTML响应式幻灯片

Question

我有一个网站的标题中有全角幻灯片。 幻灯片放映中的图像无法裁剪。 现在，我设置幻灯片允许的宽度为100％，高度可变。

问题在于，在手机上（由于屏幕比例不同），滑块看起来非常苗条。

正如我已经说过的：我无法裁剪图像。所以我可能不得不为移动设备创建一个新的滑块。 最好的方法是什么？

如果我只是做类似的事情：

<div class="mobileslider">

用于移动设备和

<div class="slider">

对于台式机，我可以通过CSS隐藏一个元素。 但是，两个滑块都会加载，不是吗？ 最有效的方法是什么？ 谢谢您的帮助。

Answer 1

您应该只需要隐藏元素并通过基于屏幕大小的几个媒体查询来显示另一个即可。

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

@media only screen and (min-width: 768px) {
    .mobileslider {
        display: none;
    }
}