求助：如何使div实现响应式布局？CSS布局问题咨询

Hey there! Let’s work through these responsive layout headaches step by step—they’re super common, so we’ll get this sorted out quickly.

1. Ditch Unwanted Scrollbars on 1080p Screens #

Scrollbars usually pop up when content spills outside the viewport. First, fix the root level spacing and overflow behavior:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* Stop horizontal scroll dead in its tracks */
}

The box-sizing: border-box rule is a game-changer here—it ensures padding and borders don’t add extra width/height to elements, which is a top cause of unexpected overflow.

2. Stop the div from Squeezing on Different Screens #

Instead of using fixed width/height values (which force the div to stay rigid), use relative units and bounds to let it resize gracefully:

#mainForm {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Keeps it perfectly centered */
  /* Replace fixed dimensions with these responsive rules */
  max-width: 90vw; /* Never wider than 90% of the screen */
  min-width: 320px; /* Don’t shrink smaller than a mobile-friendly size */
  max-height: 90vh; /* Never taller than 90% of the screen */
  overflow-y: auto; /* Only add vertical scroll if content overflows the div */
  padding: 2rem; /* Add breathing room inside the div */
}

This setup lets the div adapt to screen size while staying within reasonable limits, so it won’t get squished on small screens or stretch too big on large ones.

3. Make Text Adapt to Any Screen #

Prevent text from overflowing and let it scale with the viewport:

#mainForm p, #mainForm h1, #mainForm input {
  word-wrap: break-word; /* Wrap long words instead of letting them spill */
  overflow-wrap: break-word;
}

/* Use responsive font sizes that scale safely */
#mainForm h1 {
  font-size: clamp(1.5rem, 3vw, 2.5rem); /* Min 1.5rem, scales with screen, max 2.5rem */
}

#mainForm p {
  font-size: clamp(1rem, 2vw, 1.25rem);
}

The clamp() function is perfect here—it keeps text readable on every screen size without letting it get too tiny or huge.

4. Quick Tweaks for Form Elements (If You Have Them) #

If your div has inputs or buttons, make sure they don’t go off-screen on mobile:

#mainForm input, #mainForm button {
  width: 100%;
  box-sizing: border-box;
}

Throw these changes into your CSS, and you should see the squeezing, text overflow, and unwanted scrollbars disappear. If you have specific content or styling quirks, just let me know and we can adjust further!

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