响应式布局问题：H1与列表项缩放重叠及波浪样式实现

Hey there! Let's tackle your two website issues one by one—no JavaScript or Bootstrap required, just plain CSS tweaks that play nice with responsive design. 😊

The overlap usually happens because your layout isn't accounting for shrinking viewports. Here are a few solid fixes:

• Add consistent spacing between elements
  If your H1 and list don't have enough margin/padding, they'll squeeze together when the window shrinks. Try adding explicit spacing:

  h1 {
    margin-bottom: 2rem; /* Adjust based on your design's spacing system */
  }
  ul {
    margin-top: 1.5rem;
  }
  

• Use Flexbox for flexible vertical layout
  Wrap your H1 and list in a container with flexbox set to vertical direction—this ensures elements stay stacked properly and maintain spacing as the viewport changes:

  .content-container {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Creates uniform space between child elements */
    padding: 1rem; /* Adds padding to prevent edge crowding */
  }
  

  The gap property is cleaner than individual margins because it avoids double-spacing between elements.

• Avoid fixed widths on parent containers
  If your content wrapper has a fixed width instead of a responsive one, it'll force content to overlap when the window is smaller than that width. Switch to a max-width setup:

  .content-container {
    max-width: 1200px; /* Limits width on large screens */
    width: 100%; /* Takes full width on smaller screens */
    margin: 0 auto; /* Centers the container */
  }
  

• Tweak styles for small screens with media queries
  For extra control, adjust font sizes or spacing on smaller viewports to prevent crowding:

  @media (max-width: 768px) {
    h1 {
      font-size: 1.8rem; /* Shrink heading size on mobile */
    }
    .content-container {
      gap: 1.5rem; /* Reduce spacing slightly */
    }
  }
  

You have two great CSS-only options here:

• Native CSS text-decoration (simplest)
  Modern browsers support the wavy text decoration style, which is easy to customize:

  li {
    text-decoration: underline wavy #ff4081; /* Replace with your preferred color */
    text-underline-offset: 0.3rem; /* Controls how far the line is from the text */
  }
  

• Custom wavy line with SVG background
  If you want more control over the wave's shape, thickness, or spacing, use a repeating SVG background:

  li {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'><path fill='none' stroke='%23ff4081' stroke-width='1' d='M0 2Q5 0 10 2T20 2'/></svg>") repeat-x bottom left;
    background-size: 20px 4px; /* Adjust size to change wave frequency/thickness */
    padding-bottom: 0.5rem; /* Adds space between text and wave */
  }
  

  You can modify the SVG's stroke-width, color (replace %23ff4081 with your hex code), or path to get the exact wave shape you want.

All these solutions are pure CSS, so they're lightweight and don't rely on external libraries or scripts. Feel free to adjust values to match your website's design system!

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