Question

您可以告诉我如何在移动设备中显示不同的图像风格吗？当我在PC上时，我希望我的照片能够被剪辑，但是在移动设备上想要它们没有这种效果。这是我的代码。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

在媒体查询内部，您可以像在CSS中习惯一样设置元素的样式。唯一的区别是，规则只适用于条件为真的情况。

例如：

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

在这种情况下.myClass只有在屏幕宽度小于768px时才会获得蓝色。

我还为笔添加了边框颜色，它将随着剪辑路径而变化，因此在更改发生时更容易实现。

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

如何在移动设备上显示不同的图像样式

1 个答案: