TA貢獻1820條經(jīng)驗 獲得超10個贊
一個簡單的解決方案是制作兩個元素并在頁面寬度 > 600px 時顯示第一個元素。否則你顯示另一個。
<div id="imgs-flex">
<img src="img/img_2.jpg" alt="">
<img src="img/img_1.jpg" alt="">
<img src="img/img_0.jpg" alt="">
</div>
<div id="img-mobile">
<img src="img/img_2.jpg" alt="">
<img src="img/img_1.jpg" alt="">
<img src="img/img_0.jpg" alt="">
</div>
然后在 CSS 中：
#img-flex{
display: flex;
}
#img-mobile{
display: none;
}
/* You use Media Queries for the responsive */
@media screen and (max-width: 600px){
#img-mobile{
display: block;
}
#img-flex{
display: none;
}
}
然后你添加 Javascript 來做你的滑塊。
TA貢獻1848條經(jīng)驗 獲得超10個贊
如果屏幕小于 600 像素，則三個圖像將顯示在另一個下方。大于 600 像素的所有圖像都是并排放置的。
我希望這是您正在尋找的...
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 50%; /* for fullscreen take 100% */
}
}
<div class="row">
<div class="column">
<img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%;">
</div>
<div class="column">
<img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%">
</div>
<div class="column">
<img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%">
</div>
</div>
舉報