如何为移动设备设置不同图片样式？PC端保留clip-path裁剪效果

嘿，这个需求用CSS的媒体查询就能完美解决！核心思路就是根据屏幕宽度的不同，分别给PC端和移动端应用不同的样式。

具体实现步骤： #

1. 保留你原本的PC端样式（也就是带有clip-path的代码）
2. 添加媒体查询，当屏幕宽度小于设定的移动端断点时，重置clip-path为none，同时调整可能影响移动端布局的其他样式（比如img2的负边距）

修改后的完整代码： #

.images { 
  margin-top: 50px; 
} 

/* PC端样式 - 保持你的原有代码 */
.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 ...); /* 填入你原本的img3裁剪路径 */
  /* 保留你原本的img3其他样式 */
}

/* 移动端样式 - 屏幕宽度≤768px时生效 */
@media (max-width: 768px) {
  .img1, .img2, .img3 {
    clip-path: none; /* 完全取消裁剪效果 */
  }
  
  /* 单独修正img2的负边距，避免移动端图片重叠 */
  .img2 {
    margin-left: 0;
  }
}

一些细节说明： #

• 这里选择768px作为PC/移动端的分界断点，这是行业常用的平板与手机的分界值，你可以根据自己的设计需求调整这个数值（比如改成480px针对小屏手机）
• 重置img2的margin-left是因为移动端屏幕较窄，原本的负边距很可能导致图片重叠，破坏布局；如果你的布局在移动端不需要这个调整，可以删掉这一行
• 媒体查询的逻辑是“当屏幕宽度小于等于设定值时应用里面的样式”，所以PC端（屏幕大于768px）会自动使用你原本的clip-path样式

内容的提问来源于stack exchange，提问作者Vinc