移动端Modal全屏显示实现求助：不懂Media Query如何修改CSS

Hey there! To get your modal to take up the full screen on mobile devices, we'll use a media query—this lets us apply CSS styles only when the screen is below a certain size (like mobile phones). Here's exactly what you need to add to your CSS:

/* Full-screen modal on mobile devices */
@media (max-width: 767px) {
  .modal-dialog {
    margin: 0;
    width: 100%;
    height: 100vh; /* Takes full viewport height */
    display: flex;
    align-items: stretch;
  }

  .modal-content {
    border-radius: 0; /* Remove rounded corners */
    border: none; /* Remove border */
    box-shadow: none; /* Remove shadow for clean full-screen look */
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
  }

  .modal-body {
    height: auto !important; /* Override the fixed 350px height */
    flex-grow: 1; /* Make body take remaining space */
    overflow-y: auto; /* Scroll only when content overflows */
  }
}

What each part does: #

• Media Query: @media (max-width: 767px) targets all screens smaller than 768px (standard mobile breakpoint).
• .modal-dialog: Resets margins, takes full width/height, and uses flex to ensure the modal content stretches properly.
• .modal-content: Removes decorative elements (border, border-radius, shadow) and uses flexbox to arrange header, body, and footer in a vertical column that fills the screen.
• .modal-body: Overrides your fixed 350px height so it expands to fill the remaining space between the header and footer, scrolling only when needed.

Just add this code to your existing CSS, and your modal will match your desired full-screen mobile view!

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