CSS实现类似YouTube的响应式左右外边距方案咨询

Great question! Your hunch about margin: auto is part of the solution, but we need to pair it with responsive margin values (instead of fixed ones) to get that YouTube-style behavior where side margins shrink as the browser window gets smaller. Here's how to fix your layout:

The Problem With Your Current Code #

Right now, you're using fixed 75px margins on .section. Fixed values don't adjust with the viewport size, so on small screens, those margins will take up too much space and cramp your content.

The Solution: Responsive Margins with clamp() #

We'll use CSS clamp() to create margins that scale smoothly with the viewport, plus margin: auto if we want to center our content container. Here are two approaches depending on your layout needs:

Approach 1: Adjust Margins on .section

Keep your existing HTML structure, but update the CSS for .section to use responsive margins:

.wrap {
  width: 100%;
  height: 100%;
}

.section {
  /* Responsive side margins: scales from 1rem (min) to 75px (max) based on viewport width */
  margin-left: clamp(1rem, 5vw, 75px);
  margin-right: clamp(1rem, 5vw, 75px);
  /* Optional: Limit maximum content width to prevent stretching on large screens */
  max-width: 1200px;
  /* Center the section within .wrap (optional, if you want centered content) */
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

Approach 2: Use Padding on .wrap (Cleaner for Centered Layouts)

This is closer to how YouTube structures its layout: use the outer .wrap container to handle responsive padding and centering, so .section can fill the available space:

.wrap {
  width: 100%;
  height: 100%;
  /* Center the container and limit maximum width */
  max-width: 1400px;
  margin: 0 auto;
  /* Responsive padding that shrinks on small screens */
  padding-left: clamp(1rem, 5vw, 75px);
  padding-right: clamp(1rem, 5vw, 75px);
  /* Ensure padding doesn't add to the container's width */
  box-sizing: border-box;
}

.section {
  width: 100%;
  /* No need for margins here—padding on .wrap handles the spacing */
}

Why This Works #

• clamp(min, preferred, max): This function lets you set a value that adapts to the viewport. In our case:
  • 1rem: Minimum margin/padding (stops shrinking once it hits this value on small screens)
  • 5vw: Preferred value (5% of the viewport width—scales linearly with screen size)
  • 75px: Maximum margin/padding (stops growing once it hits this on large screens)
• margin: 0 auto: Centers the .wrap container within the viewport, which is key for YouTube's centered layout.
• box-sizing: border-box: Ensures padding doesn't make the .wrap container wider than 100% of the viewport.

Bonus: Media Queries (Alternative to clamp()) #

If you need more control over specific breakpoints, you can use media queries instead of clamp():

.section {
  margin-left: 75px;
  margin-right: 75px;
}

/* When screen is smaller than 768px */
@media (max-width: 768px) {
  .section {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* Optional: Add a medium breakpoint */
@media (max-width: 1024px) {
  .section {
    margin-left: 2rem;
    margin-right: 2rem;
  }
}

clamp() is more modern and requires less code, but media queries give you precise control over breakpoints.

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