根据屏幕大小按比例调整文本大小

debugcn 发表于 Dev

保罗

这是我的小型网页代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Risk Management</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link href="https://riskmp.com/assets/css/home_style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="top"></div>
        <div id="header">
            <img id="logo" src="https://riskmp.com/assets/images/logo_white_text.png" alt="RiskMP Logo"/>
        </div>
        <div id="middle">
            <img id="left-img" src="https://riskmp.com/assets/images/rockclimbing2.jpg" alt="Rock Climbing Photo"/>
            <div id="center">
                <h1 id="center-title">Risk Management for construction: offering a complete set of services and products to minimize product risk and improve project management</h1>
                <ul class="nav">
                    <li class="nav-container">
                        <div class="nav-el nav1">
                            <a>Risk Management Workshops</a>
                        </div>
                        <div class="nav-desc nav-desc1">
                            <a href="#">
                                <div class="desc-link">
                                    RISK MANAGEMENT WORKSHOPS
                                </div>
                            </a>
                            <div class="desc-text">
                                <p>Risk Management workshops to improve project management practices</p>
                            </div>
                        </div>
                    </li>
                    <li class="nav-container">
                        <div class="nav-el nav2">
                            <a>Project Consulting</a>
                        </div>
                        <div class="nav-desc nav-desc2">
                            <a href="#">
                                <div class="desc-link">
                                    PROJECT CONSULTING
                                </div>
                            </a>
                            <div class="desc-text">
                                <p>Project consulting for project planning, scheduling, tracking and Risk management</p>
                            </div>
                        </div>
                    </li>
                    <li class="nav-container">
                        <div class="nav-el nav3">
                            <a>Risk Management Software</a>
                        </div>
                        <div class="nav-desc nav-desc3">
                            <a href="#">
                                <div class="desc-link">
                                    RISK MANAGEMENT SOFTWARE
                                </div>
                            </a>
                            <div class="desc-text">
                                <p>Ground-breaking software that helps you manage risk in your company</p>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
            <img id="right-img" src="https://riskmp.com/assets/images/crane.png" alt="Crane"/>
        </div>
    </body>
</html>

在1080p显示屏上看起来还不错，但是当我放大（或使用较小的窗口大小）时，屏幕中央的文本也会变大，并越过两侧的图像。如何确保文本和链接相对于图像不向下延伸？

谢谢，

保罗

我最终将中心div设置为固定宽度（425px），并且左侧位置为30％。我删除了图片标签，而是将两个图片都设为包含#middle div的单个背景。尽管这不会调整文本的大小，但是它解决了我的问题，即在较小的分辨率下文本会溢出。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。