如何让HTML网站适配所有屏幕分辨率？代码排查求助

开发者阿泽

2026-8-10

解决HTML页面屏幕适配与元素重叠问题

问题根源排查

页面出现元素重叠、适配失效，核心原因集中在以下几点：

页面主体.topical设置固定height:100vh，内容超出容器高度后溢出重叠
多处使用float布局但未处理清除浮动，导致元素位置错乱
图片使用固定宽高属性，小屏幕下挤压文本空间
全局样式（如p{font-size:small}）与页面特定样式冲突
Footer定位逻辑错误，未随内容自然流动

分步修复方案

1. 解除页面高度限制

修改.topical样式，让页面高度随内容自动延伸：

.topical{
    width: 100%;
    min-height: 100vh; /* 替换原height:100vh */
    background: linear-gradient(rgba(0, 0, 0, 0.350),rgba(0, 0, 0, 0.350)), url('/bilder/topical.jpg') no-repeat center / cover ;
    color: white;
    padding-bottom: 60px; /* 给footer预留空间 */
}

2. 修复浮动布局问题

移除全局h1{float:right;}，改用文本对齐控制标题位置，避免打乱文本流：

.topical h1{
    text-align: right;
    padding: 20px 20px 0 0;
}

给图片设置最大宽度，避免大屏下尺寸失控：

.teknologi, .science{
    float: right;
    margin-right: 5%;
    max-width: 300px;
    height: auto; /* 自动保持宽高比 */
    margin-bottom: 1.5rem;
}

3. 实现图片响应式

删除HTML中图片的固定width和height属性，用CSS控制自适应：

<!-- 修改前 -->
<img src="/bilder/workplace.png" alt="Bilde av samfunn og teknologi" width="300" height="241" class="teknologi">
<!-- 修改后 -->
<img src="/bilder/workplace.png" alt="Bilde av samfunn og teknologi" class="teknologi">

添加全局图片自适应规则：

.topical img{
    max-width: 100%;
    height: auto;
}

4. 修正容器布局冲突

Topical页面的.container不需要首页的垂直居中逻辑，改为块级布局：

.topical .container{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: block; /* 替换原flex布局 */
}

同时将全局段落样式改为仅作用于Topical页面：

.topical p{
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

5. 修复Footer定位

去掉.footer的错误定位属性，改为随内容自然排列：

.footer{
    width: 100%;
    background-color: #000d1a;
    color: white;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

6. 完善小屏幕适配

在现有媒体查询中添加小屏幕布局调整：

@media only screen and (max-width: 768px) { 
    html {
        font-size: 14px; /* 比原10px更易读 */
    }
    .topical h1{
        text-align: center;
        padding: 20px 0;
    }
    .teknologi, .science{
        float: none;
        display: block;
        margin: 0 auto 1.5rem;
    }
    .navbar{
        justify-content: center;
    }
    .navbar a{
        margin: 5px;
        padding: 0.3em 0.7em;
        font-size: 0.8rem;
    }
}

修改后的完整代码示例

关键CSS代码

/*homepage*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=PT+Sans&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Open Sans';
    font-size: 18px;
}

#hero {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.350),rgba(0, 0, 0, 0.350)), url('./bilder/welcome.jpg') no-repeat center / cover ;
    color: white;
}

.navbar {
    display: flex;
    justify-content: flex-end;
    padding: 0 12px;
}

.navbar a {
    color: white;
    font-size: 0.9rem;
    font-weight: bold; 
    text-decoration: none;
    line-height: 60px;
    padding: 0.4em 0.9em;
    border: 2px solid white;
    border-radius: 20px;
    margin: 9px;
    transition: 0.3s;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.navbar a:hover {
    color:black;
    background: rgb(177, 108, 77);
    border-color: black;
}

.container {
    width: 100%;
    height: 90%;
    max-width: 1200px; 
    display: flex;
    justify-content: left;
    align-items: center;
    margin: 0 auto;
}

.container .hero-text h1 {
    font-size: 3rem;
    margin-bottom: 0.3rem;
}

.container .hero-text h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.container .hero-text p {
    font-family: 'PT Sans';
    font-size: 1.2rem;
    max-width: 70%;
    margin-left: 0;
}

.container .hero-text a {
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: black;
    background-color: lightgray;
    display: inline-block;
    border: 2px solid;
    border-radius: 10px;
    padding: 0.5em 1.2em;
    margin-top: 1rem;
    transition: 0.3s;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.container .hero-text a:hover {
    background: rgb(177, 108, 77);
    color: black;
}

.container .bilde-credit p {
    opacity: 30%;
    color: brown;
    font-size: 1.0rem;
    margin-top: 0.5rem;
}

/*topical siden*/
.topical{
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.350),rgba(0, 0, 0, 0.350)), url('/bilder/topical.jpg') no-repeat center / cover ;
    color: white;
    padding-bottom: 60px;
}

.topical h1{
    text-align: right;
    padding: 20px 20px 0 0;
}

.topical .container{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: block;
}

.container #text {
    margin-top: 20px;
}

.topical p{
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.teknologi, .science{
    float: right;
    margin-right: 5%;
    max-width: 300px;
    height: auto;
    margin-bottom: 1.5rem;
}

.footer{
    width: 100%;
    background-color: #000d1a;
    color: white;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

.footer a {
    color: white;
}

@media only screen and (max-width: 768px) { 
    html {
        font-size: 14px;
    }
    .topical h1{
        text-align: center;
        padding: 20px 0;
    }
    .teknologi, .science{
        float: none;
        display: block;
        margin: 0 auto 1.5rem;
    }
    .navbar{
        justify-content: center;
    }
    .navbar a{
        margin: 5px;
        padding: 0.3em 0.7em;
        font-size: 0.8rem;
    }
    .container .hero-text h1 {
        font-size: 2.5rem;
    }
}

关键HTML代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Topical siden</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body class="topical">
        <!-- NAVBAR -->
        <div class="navbar">
            <nav>
                <a href="index.html">Hjem</a>   
                <a href="kafe.html">Kafé</a>
                <a href="booking.html">Booking</a>
                <a href="accessibility.html">Accessibility</a>
            </nav>
        </div>
        <h1>Topical page - Technology and society </h1>
        <!--Tittel-->
        <div class="container">
            <div id="text">
                <h2>The interplay between technology and society</h2>
                <!--Undertittel-->
                <p>
                    1.2 <img src="/bilder/workplace.png" alt="Bilde av samfunn og teknologi" class="teknologi">
                    The evolution of technology is a fundamental part of society, and it is safe to say that we have benefited from it. In the past we relied on books, but now we have phones that can quickly find answers to our questions. Our workplace has also become safer and more efficient with the introduction of automated technology (Ellingrud, 2018), but it has also contributed to the elimination of certain jobs. However, a study of census conducted over the course of 140 years suggests technology has created more jobs than it has destroyed (Stewart et al., 2015, p. 3). It has also helped maintain jobs through difficult times. Thanks to the communication channels technology provides, jobs could still be done from home during the COVID-19 pandemic. In the same way society progresses, it also starts valuing new things: and what becomes important to us, becomes important to technology. One example being that once we realized the effects of climate change, we started caring about creating sustainable technologies. 
                    Societal values can also have a negative impact. Society has long been obsessed with “the perfect body”, and since it is widely advertised, it has inevitably migrated to the internet and become a part of that world. Now we not only see it in the “real” world, but also on our phones constantly. One could argue that its increased exposure intensifies the pressure of fulfilling the unrealistic body standards our society glorifies, which can lead to body image issues and eating disorders.
                </p>
                <p>
                    <img src="/bilder/science.jpeg" alt="Bilde av diverse ting samfunnet og teknologi " class="science">
                    1.4
                    Taking responsibility and attempting to foresee the possible future outcomes of your creation should be an important part of every innovator’s process. Innovations can have serious societal implications and for that reason it is only fair to expect innovators to take this into consideration. However, we should be somewhat reasonable to which degree we hold them accountable, and that is because RRI is not an easy process. It requires research, cooperation and communication – not just in the form of discussion between innovators, but also in the shape of feedback from society. Society plays a significant role in the development of innovations, as the citizens can bring a unique, diversified perspective that innovators could forget to consider. If we fail to properly communicate our criticisms, we are, arguably, partially responsible.
                    Even a well-intended innovation that had RRI strongly implemented into its process, can be turned “evil”. Technology is not inherently bad/harmful in itself – it is what we choose to do with it that can make it such. Sadly, there are people who take advantage of innovator’s inventions and “villainize” them in ways they weren’t meant to be utilized. Examples of this include the internet: the internet is good because it provides methods of communication and supplies information, but it has also become a damaging place used for other purposes like cyber-bullying and human trafficking recruitment. With a quick Google search, we can see that laws have been set in place to prevent this, and that there can be severe penalties for committing these offenses. However, I would argue that these crimes are hard to regulate because of the anonymity the internet offers us, and because it is not taken as seriously as other “real life” crimes.
                    No invention will ever be flawless, and unintended consequences will likely surface regardless – but by practicing RRI we can reduce the severity and number of them. 
                </p>
            </div>
        </div>
        <!-- FOOTER UNDER + KILDER -->
        <div class="footer">
            <footer>
                Sources: <br>
                Ellingrud, K. (2018). The Upside Of Automation: New Jobs, Increased Productivity And Changing Roles For Workers. Retrieved from <a href="https://www.forbes.com/sites/kweilinellingrud/2018/10/23/the-upside-of-automation-new-jobs-increased-productivity-and-changing-roles-for-workers/?sh=5237c0d47df0">Forbes</a>
                <br> Stewart, I., De, D. & Cole, A. (2015). Technology and people: The great job-creating machine. 1-16. Retrieved from <a href="https://www2.deloitte.com/content/dam/Deloitte/uk/Documents/finance/deloitte-uk-technology-and-people.pdf">Deloitte</a> 
            </footer>
        </div>
    </body>
</html>

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