如何让自定义网站加载器中的居中div文本实现响应式？

Hey there! I see you're working on a custom website preloader and want the centered text to be responsive—let's get that sorted out. The main issues with your current setup are the fixed line-height and font-size values, which won't adapt to different screen sizes. Here's a revised approach that makes both the text positioning and size responsive:

Updated Code #

CSS #

body { 
  overflow: hidden; 
}

#preloader { 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background-image: url(https://www.publicdomainpictures.net/pictures/200000/velka/plain-red-background.jpg); 
  z-index: 99;
  /* Use flexbox to easily center both camera and text */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem; /* Adds space between camera icon and text */
}

#camera { 
  width: clamp(150px, 30vw, 300px); /* Responsive width: scales between 150px and 300px, relative to viewport width */
  height: clamp(150px, 30vw, 300px); /* Match width for square aspect ratio */
  background-image: url(https://svgshare.com/i/6kD.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* Ensures the SVG scales without cropping */
}

#text { 
  color: white; 
  font-size: clamp(1rem, 2vw, 1.5rem); /* Responsive font size: scales with viewport width */
  font-weight: bold;
  text-align: center;
  /* No need for fixed line-height anymore—flexbox handles centering */
}

HTML #

<div id="preloader">
  <div id="camera"></div>
  <div id="text">Website loading...</div>
</div>

Key Improvements Explained #

• Flexbox Layout: I changed #preloader to use flexbox, which simplifies centering elements vertically and horizontally without relying on negative margins or fixed line-height. It also lets us easily adjust the spacing between the camera icon and text.
• Responsive Sizing:
  • clamp() functions are used for both the camera's dimensions and the text's font size. This sets a minimum, preferred, and maximum value—so elements scale smoothly with the viewport but never get too small or large.
  • background-size: contain ensures the camera SVG scales properly within its container without getting cut off.
• Cleaner Structure: I re-ordered the HTML to put the camera icon above the text (more intuitive for loading states) and removed unnecessary fixed positioning hacks.

Just replace your existing code with this, and the text will adapt nicely to any screen size. Remember to test it across different device widths to make sure it behaves as expected!

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