如何使用CSS @media规则移动元素并实现带箭头弹窗的响应式适配

问题原因 #

你写的移动端箭头样式规则优先级低于全局默认规则，因为你把@media内的.popup .popuptext::after样式定义在了全局同选择器样式的前面，CSS按书写顺序后定义的规则会覆盖前面对应的同优先级规则，所以移动端的箭头位置修改始终不生效。
另外你的代码还有两处可优化的细节：

• 两个<a>标签重复使用了id="cv"，同一页面id必须唯一，建议改成class="cv"
• 最后#cv的CSS规则缺少闭合的}

修正后的完整代码 #

HTML代码

<div class="popup" onclick="myFunction()"><p>CV</p>
<span class="popuptext" id="myPopup"><a target="_blank" class="cv" href="img/CV.pdf">View </a><a class="cv" download="img/CV.pdf" href="">Download </a><i class="fa fa-remove"></i></span>
</div>

CSS代码

/* 弹窗主体样式 */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -310px;
}

/* 弹窗箭头默认样式（桌面端） */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* 移动端适配 */
@media only screen and (max-width:600px){
  .popup .popuptext{
    margin-left: -170px;
  }
  /* 移动端箭头样式放在默认样式后即可覆盖生效 */
  .popup .popuptext::after {
    left: 10%;
  }
}

/* 弹窗显示切换类 */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* 淡入动画 */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

.cv{
  text-decoration: none;
  color:white;
  font-weight: bold;
}

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