如何在缩小浏览器窗口时固定文本位置并实现响应式宽度

核心思路 #

• 基础状态：文本固定左距300px、宽度750px、两端对齐，右侧预留100px间距
• 响应式阈值：当窗口宽度小于300px(左距)+750px(文本宽)+100px(右距)=1150px时，将文本宽度调整为500px
• 防挤压处理：通过最小宽度限制和自适应逻辑，避免窗口过小时文本被过度压缩

修改后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <style>
      @font-face {
        font-family: "Arial";
        src: url(https://fonts.googleapis.com/css2?family=Arial&display=swap);
      }
      @font-face {
        font-family: "Courier New";
        src: url(https://fonts.googleapis.com/css2?family=Courier+New&display=swap);
      }
      body {
        background-color: white;
        margin: 0;
        padding: 0;
        min-width: 900px; /* 最小宽度：300+500+100，避免文本过度挤压 */
      }
      h1 {
        position: absolute;
        letter-spacing: -10px;
        left: 30px;
        top: -35px;
        font-size: 85px;
        font-family: "Arial";
        font-weight: bold;
      }
      h2 {
        position: absolute;
        left: 30px;
        top: 95px;
        font-size: 18px;
        font-family: "Courier New";
        font-weight: normal;
      }
      h3 a {
        position: absolute;
        left: 30px;
        margin-top: 350px;
        font-size: 24px;
        font-family: "Courier New";
        font-weight: normal;
        text-decoration: none;
        color: black;
      }
      h4 a {
        position: absolute;
        left: 30px;
        margin-top: 649px;
        font-size: 24px;
        font-family: "Courier New";
        font-weight: normal;
        text-decoration: none;
        color: black;
      }
      h5 a {
        position: absolute;
        left: 30px;
        margin-top: 676px;
        font-size: 24px;
        font-family: "Courier New";
        font-weight: normal;
        text-decoration: none;
        color: black;
      }
      /* 核心文本样式 */
      p {
        position: absolute;
        left: 300px; /* 固定左距，对齐按钮区域 */
        top: 350px;
        width: 750px; /* 默认宽度 */
        margin-right: 100px; /* 右侧预留间距 */
        font-family: 'Courier New';
        font-size: 24px;
        font-weight: normal;
        text-align: justify;
        box-sizing: border-box; /* 确保宽度计算包含内边距/边框 */
      }

      /* 窗口宽度不足1150px时，调整文本宽度 */
      @media screen and (max-width: 1150px) {
        p {
          width: 500px;
        }
      }

      /* 窗口宽度小于900px时，自适应布局避免横向滚动 */
      @media screen and (max-width: 900px) {
        body {
          min-width: auto;
        }
        p {
          left: 30px; /* 和左侧按钮对齐 */
          width: calc(100% - 60px); /* 左右各留30px间距 */
          margin-right: 30px;
        }
      }
    </style>

    <script>
      function updateTime() {
        var d = new Date();
        var h = addZero(d.getUTCHours());
        var m = addZero(d.getUTCMinutes());
        var s = addZero(d.getUTCSeconds());
        document.getElementById("time").innerHTML = h + ":" + m + ":" + s + " UTC";
      }
      function addZero(i) {
        if (i < 10) {
          i = "0" + i;
        }
        return i;
      }
      setInterval(updateTime, 1000);
    </script>
  </head>
  <body onload="updateTime()">
    <h1>OSAA</h1>
    <h2 id="time">00:00:00 UTC</h2>
    <h3><a href="#">enquire [x]</a></h3>
    <h4><a href="#">about us</a></h4>
    <h5><a href="#">projects</a></h5>
    <p>to enquire about our services, please write us an email with your full name and a short description and/or files that might help with the solution.<br><br><a href="mailto:osaa.contact@gmail.com" style="color: inherit; text-decoration: none;">osaa.contact@gmail.com</a><br><br>we will get back to you promptly.</p>
</body>
</html>

关键修改说明 #

1. 固定左距：给p标签设置left:300px，确保文本始终停在左侧按钮旁，不会随窗口缩小左移
2. 响应式切换：通过max-width:1150px的媒体查询，触发文本宽度从750px改为500px
3. 最小宽度限制：给body设置min-width:900px，避免窗口过小导致文本挤压；当窗口宽度小于900px时，自动切换为自适应布局，保证移动端可读性
4. 清理冗余代码：删除原代码中无效、重复的媒体查询，简化逻辑结构

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