html - 如何在移动设备上显示不同的图像风格

Question

嗨，谁能告诉我如何在移动设备上显示不同的图像样式？当我在 PC 上时，我希望我的照片具有剪辑路径，但在移动设备上希望它们没有这种效果。这是我的代码。

.images {
  margin-top: 50px;
}

.img1{
  clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
  -webkit-transition: width 1s;
  transition: width 1s;
}

.img2{
  clip-path: polygon(0 0, 80% 0, 100% 100%, 20% 100%);
  margin-left: -111px;
  -webkit-transition: width 1s;
  transition: width 1s;
}

.img3{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
  margin-left: -111px;
  -webkit-transition: width 1s;
  transition: width 1s;
}

<div class="images wow fadeInLeft">
        <img class="img1" src="http://channeldrive.in/wp-content/uploads/2017/04/Zyxel_logo-534x173.png" alt="">
        <img class="img2" src="http://channeldrive.in/wp-content/uploads/2017/04/Zyxel_logo-534x173.png" alt="">
        <img class="img3" src="http://channeldrive.in/wp-content/uploads/2017/04/Zyxel_logo-534x173.png" alt="">
    </div>

Answer 1

对于这种情况，您将需要使用媒体查询。如果您从未听说过，check it out here.

在媒体查询中，您可以像在 CSS 中习惯的那样设置元素的样式。唯一的区别是，规则仅在条件为真时应用。

例如:

@media(max-width: 768px){
  .myClass{
    color: blue;
  }
}

在这种情况下，如果您的屏幕宽度小于 768 像素，.myClass 只会获得蓝色。

我还在 Pen 中添加了边框颜色，它会随着 Clip-Path 的变化而变化，因此在发生变化时更容易意识到。

工作笔:https://codepen.io/Tibixx/pen/WzZyKp