Grid系统比例异常求助：320px视口下布局比例错误原因排查

Hey there! I’ve looked over your code, and let’s figure out why your Grid layout is misbehaving on 320px viewports—plus how to fix it.

Key Causes of the Layout Breakage #

Let’s break down the main issues:

• Total Grid Width Exceeds Container: Your grid-template-columns: 50vw 50vw plus grid-column-gap: 5vw adds up to 105vw total. That’s wider than the parent .blue-box (100vw), causing horizontal overflow and messed-up proportions.
• Unaccounted Body Margins: Browsers apply default margins to the <body> element. When you set .blue-box to 100vw, it ignores these margins and creates horizontal scroll, throwing off your Grid’s alignment.
• Mixed Viewport Units (vw/vh) in Small Screens: Using vh for font sizes and row heights gets tricky on small devices. For example, a 320px-wide phone might have a height of ~568px—10vh becomes 56.8px, but if the viewport is shorter (like in landscape), this font size will shrink drastically, breaking the layout flow.
• Missing Viewport Meta Tag: If you haven’t added the viewport meta tag to your HTML, mobile browsers will zoom out to fit the "desktop" width, making your 320px simulation inconsistent with real device behavior.

Step-by-Step Fixes #

Here’s how to adjust your code to fix these issues:

1. Add the Viewport Meta Tag #

First, make sure your HTML <head> includes this tag to ensure proper mobile rendering:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Fix Grid Container & Columns #

Adjust the Grid to use percentage-based widths instead of vw to avoid overflow, and reset the body margins:

/* Reset default body margins */
body {
  margin: 0;
  padding: 0;
}

.blue-box {
  margin-top: 10vh;
  width: 100%; /* Use 100% instead of 100vw to respect body margins */
  min-height: 33vh; /* Use min-height instead of fixed height for flexibility */
  background-color: #33cccc;
  padding: 0 2vw; /* Add padding instead of relying on item margins */
  box-sizing: border-box; /* Include padding in the element's total width */
}

.container-3 {
  display: grid;
  /* Use fr units for flexible columns that fit the container */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto; /* Let rows adjust to content */
  color: #ffffcc;
  font-family: Roboto;
  grid-column-gap: 3vw; /* Reduce gap to fit small screens */
  height: 100%; /* Make Grid fill the parent box */
}

3. Adjust Text & Image Styles for Small Screens #

Tweak font sizes and positioning to work better on narrow viewports:

.word-bb-1 {
  font-size: clamp(2rem, 8vh, 10vh); /* Use clamp() for responsive font sizing */
  font-weight: bold;
  text-transform: capitalize;
  margin-top: 2vh; /* Reduce top margin for small screens */
  margin-left: 0; /* Remove left margin—use container padding instead */
}

.word-bb-2 {
  margin-top: 2vh;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
}

.word-bb-3 {
  font-size: clamp(1.5rem, 6vw, 7vw);
  grid-column: 1/3;
  text-align: center;
  font-weight: bold;
  margin: 1vh 0;
}

.word-bb-mark {
  font-weight: bold;
  font-size: clamp(1.8rem, 8vw, 3rem);
  text-align: center;
  grid-column: 1/3;
}

.img-box {
  width: 35vw;
  position: relative;
  left: 0; /* Remove negative left position to avoid overflow */
  margin: 0 auto; /* Center the image */
}

4. Optional: Add Media Query for 320px Specific Adjustments #

If you still need fine-tuning for 320px viewports, add a media query:

@media (max-width: 320px) {
  .container-3 {
    grid-column-gap: 2vw;
  }
  .word-bb-1 {
    font-size: 7vh;
  }
}

Why This Works #

• Using fr units for Grid columns ensures they always fit within the container, even with gaps.
• clamp() for font sizes lets you set minimum, preferred, and maximum sizes, so text stays readable across all screen sizes.
• Resetting body margins and using box-sizing: border-box prevents unexpected overflow.
• The viewport meta tag ensures mobile browsers render your site at the correct width.

内容的提问来源于stack exchange，提问作者Amine El were