CSS - 如何根据此设计制作响应式滑块

【问题标题】：CSS - How to make responsive slider according to this designCSS - 如何根据此设计制作响应式滑块
【发布时间】：2021-08-23 03:06:44
【问题描述】：

我想根据这个设计做一个响应式侧边栏

我的主要目标是附加“”功能并使其具有响应性

这是我的代码：https://jsfiddle.net/yg8rwbju/1/

enter code here

如果不用额外的库就可以完成就好了

【问题讨论】：

【解决方案1】：

制作一栏

.slider {display: grid; grid-template-columns: 100%; gap: 0 14px;}

要隐藏和切换，您可以添加额外的类。

<div class="slider__element content">

使用 nth-child 伪隐藏第 3 个和更多元素。

@media only screen and (max-width: 768px) {
.content:nth-child(n + 3){
   display: none;
 }
}

我建议您使用移动优先的样式。首先，为移动设备设置样式，然后为桌面设置样式。处理移动样式问题很好。

@media only screen and (min-width: 768px){}

【讨论】：