如何在CSS中实现响应式模态框过渡_Transition opacity transform与media query方法

<div class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>标题</h2>
    <p>内容文本...</p>
  </div>
</div>

.modal {
  display: none; /* 初始隐藏 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
<p>.modal.show {
display: flex;
opacity: 1;
visibility: visible;
}</p><p>.modal-content {
background: #fff;
padding: 20px;
border-radius: 8px;
max-width: 500px;
width: 90%;
transform: scale(0.8);
transition: transform 0.3s ease;
}</p><p>.modal.show .modal-content {
transform: scale(1);
}</p>

const modal = document.querySelector('.modal');
// 显示
modal.classList.add('show');
// 隐藏
modal.classList.remove('show');

@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    max-width: none;
    margin: 20px auto;
    transform: translateY(-10px) scale(0.9);
  }
<p>.modal.show .modal-content {
transform: translateY(0) scale(1);
}
}</p><p>@media (max-height: 500px) {
.modal-content {
overflow-y: auto;
max-height: 80vh;
}
}</p>