网页图片内嵌文本响应式适配问题求助（附HTML/CSS代码）

我看了你的代码，问题主要出在固定像素值的字体大小和内边距上——这些值在大屏上显示正常，但到了手机这类小屏设备就会显得过大，或者排版错乱。另外你HTML里的容器div写了两个id属性（这是无效的，一个元素只能有一个id），得先修正这个小问题。

下面是调整后的完整代码，我会一步步说明改动点：

修正后的HTML代码 #

<html>
<head>
    <title>restaurant</title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="main.css">
    <script src="script.js"></script>
</head>
<body>
    <!-- 修正：把重复的id改成class，一个元素只能有一个id -->
    <div class="w3-display-container w3-mobile" id="main">
        <img src="headerimg.jpg" class="w3-image w3-mobile" alt="Restaurant Header">
        <div class="w3-display-topleft w3-mobile" id="title">
            <br />
            <p>Welcome to <strong>JS</strong> restaurant</p>
        </div>
        <p class="w3-display-left w3-mobile" id="description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque at enim voluptatibus, veniam omnis quaerat cumque deleniti repellat tempore rem sapiente temporibus consectetur illum praesentium eius, expedita totam? Earum, quos?
        </p>
    </div>
</body>
</html>

优化后的CSS代码 #

/* 使用视窗宽度单位vw，让字体大小随屏幕宽度自动缩放 */
#title {
    color: rgb(255, 237, 75);
    font-size: 4vw; /* 相当于屏幕宽度的4%，小屏自动变小，大屏自动变大 */
    font-weight: bold;
    padding-left: 2vw; /* 用vw代替固定px，内边距也响应式 */
}

#title strong {
    color: brown;
}

#description {
    max-width: 50%;
    padding-left: 2vw;
    font-size: 1.8vw; /* 同样用vw适配 */
    font-weight: bold;
    /* 小屏时让文本换行更友好，避免溢出 */
    line-height: 1.5;
}

/* 针对小屏幕（比如手机）做额外优化，避免字体过小 */
@media (max-width: 768px) {
    #title {
        font-size: 6vw; /* 手机上字体比例调大一点，保证可读性 */
    }
    #description {
        max-width: 80%; /* 手机上让文本占更多宽度，避免太窄 */
        font-size: 3vw;
    }
}

关键改动说明 #

• 相对单位vw：vw是视窗宽度的百分比，1vw等于屏幕宽度的1%，这样字体大小会随着屏幕宽度自动调整，完美适配各种设备。
• 媒体查询：针对小屏幕（768px以下）单独调整字体大小和宽度，保证手机上的可读性，不会因为屏幕太小导致文字看不清或者排版太挤。
• 修正HTML的id错误：一个HTML元素只能有一个id属性，之前的重复id会导致样式或JS选择器失效，已经改成class属性。
• 相对内边距：把固定的30px、40px改成2vw，让内边距也随屏幕宽度缩放，保持布局比例一致。

这样调整后，图片上的文本在电脑、平板、手机上都能自动适配，不会出现过大或排版错乱的问题了。

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