如何修改Blogger邮件订阅弹窗实现全屏幕自适应？

Hey there, let's get that email popup working smoothly across all screen sizes! The core problem right now is the fixed width: 500px and height: 280px on your popup container—those hardcoded dimensions cause it to overflow on mobile and smaller screens. Here's the step-by-step fix to make it fully adaptive:

Step 1: Rewrite the Popup Container CSS #

Replace your existing .email-popup-box style with this. We're ditching fixed dimensions for flexible ones, and using a more reliable centering method:

.email-popup-box {
  max-width: 500px; /* Keep a clean max width for large screens */
  width: 90%; /* Take 90% of screen width on small devices */
  min-height: 280px; /* Ensure minimum height to maintain layout integrity */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Perfect center regardless of screen size */
  margin: 0;
  text-align: center;
  background: #fff;
  -webkit-animation: swinging 10s ease-in-out 0s infinite;
  -moz-animation: swinging 10s ease-in-out 0s infinite;
  animation: swinging 10s ease-in-out 0s infinite;
  padding: 15px; /* Add padding to prevent content from touching edges */
  box-sizing: border-box; /* Make padding count towards total width, no overflow */
}

Step 2: Make Form Inputs Responsive #

Your input field and button had fixed widths too—let's adjust those to fit their container seamlessly:

.in-popup-mail {
  padding: 10px;
  margin: 0 auto;
  width: 100%; /* Fill the parent container */
  box-sizing: border-box;
}

.btn-popup-mail {
  padding: 10px 15px; /* Adjust padding for better touch targets on mobile */
  background: #006D90;
  border: 2px solid #fff;
  color: #fff;
  margin: 0 auto;
  width: 100%; /* Full-width button for mobile-friendliness */
  box-sizing: border-box;
}

Step 3: Optimize Text for Small Screens #

Add a media query to shrink text sizes on mobile so they don't overflow the popup:

@media (max-width: 480px) {
  .email-popup-header {
    font-size: 1.5em; /* Smaller header on phones for better fit */
  }
  .email-popup-subheader {
    font-size: 1em;
    padding: 0 10px; /* Add side padding to prevent text from touching edges */
  }
}

Step 4: Keep the Rest of Your Code Intact #

Your JavaScript, HTML structure, and other CSS styles (like the overlay .outer-email-popup-box) don't need changes—just swap out the modified CSS sections above.

Full Modified CSS Code #

Here's the complete CSS block you can use to replace your original styles:

.outer-email-popup-box { 
  display: none; 
  background: rgba(0, 0, 0, 0.8); 
  width: 100%; 
  height: 100%; 
  position: fixed; 
  top: 0; 
  left: 0; 
  z-index: 99999; 
} 

.email-popup-box { 
  max-width: 500px; 
  width: 90%; 
  min-height: 280px; 
  position: fixed; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  margin: 0; 
  text-align: center; 
  background: #fff; 
  -webkit-animation: swinging 10s ease-in-out 0s infinite; 
  -moz-animation: swinging 10s ease-in-out 0s infinite; 
  animation: swinging 10s ease-in-out 0s infinite; 
  padding: 15px; 
  box-sizing: border-box; 
} 

.email-popup-header { 
  text-align: center; 
  font-size: 2em; 
  color: #FFFFFF; 
  background: #006D90; 
  padding: 4px 15px 7px 10px; 
  margin: 13px 0px 14px 0px; 
} 

.email-popup-subheader { 
  text-align: center; 
  font-size: 1.1em; 
  color: #676767; 
  padding: 0px 0px 2px 
} 

.email-popup-body { 
  text-align: center; 
  margin-top: 9px; 
  padding: 22px 0px 3px 0px; 
  background: #006D90; 
} 

.email-right { 
  background: green; 
  float: right; 
} 

.email-left { 
  background: red; 
  float: left; 
} 

.email-form { 
  width: 80%; 
  margin: 0 auto; 
} 

.in-popup-mail { 
  padding: 10px; 
  margin: 0 auto; 
  width: 100%; 
  box-sizing: border-box; 
} 

.btn-popup-mail { 
  padding: 10px 15px; 
  background: #006D90; 
  border: 2px solid #fff; 
  color: #fff; 
  margin: 0 auto; 
  width: 100%; 
  box-sizing: border-box; 
} 

.btn-popup-mail:hover { 
  background: #003E52 
} 

.background-img { 
  width: 40px; 
  margin: 0 auto; 
  padding-top: 5px 
} 

.exit-button-subbox { 
  float: right; 
  cursor: pointer; 
  position: absolute; 
  right: 0px; 
  top: 0px; 
  margin-top: 4px; 
  margin-right: 4px; 
} 

.exit-button-subbox:before { 
  content: "X"; 
  padding: 4px 4px; 
  background: #FFFFFF; 
  color: #000000; 
  font-weight: normal; 
  font-size: 15px; 
  font-family: sans-serif; 
} 

.footer-popup-mail { 
  color: #fff; 
  font-size: 12px; 
  margin-top: -5px 
} 

.footer-popup-mail a { 
  color: #fff 
}

@media (max-width: 480px) {
  .email-popup-header {
    font-size: 1.5em;
  }
  .email-popup-subheader {
    font-size: 1em;
    padding: 0 10px;
  }
}

Why This Works: #

• Flexible Width: max-width: 500px keeps the popup looking clean on desktops, while width:90% ensures it fits nicely on mobile without touching screen edges.
• Better Centering: transform: translate(-50%, -50%) centers the popup perfectly no matter the screen size, unlike the old margin:auto method which relied on fixed positioning.
• Box Sizing: box-sizing: border-box ensures padding doesn't make elements wider than their container, preventing unexpected overflow.
• Mobile-Friendly Text: The media query adjusts text sizes to avoid overflow on small screens, improving readability for mobile users.

After making these changes, your popup will automatically adapt to any screen—from phones to large desktops!

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