Question

以下是我的小网页代码：

<!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显示器上看起来很好，但是当我放大（或使用较小的窗口大小）时，屏幕中央的文本也会增长并延伸到两侧的图像之外。我该怎么做才能确保文本和链接不会相对于图像进一步向下延伸？

谢谢，

保

Answer 1

您可以使用mediaqueries在屏幕宽度方面设置不同的字体大小。在这里看到一些关于它的问题https://stackoverflow.com/questions/tagged/media-queries

危险：你可以使用vw或vh单位来调整字体大小，它不是真正可靠的和chrome，实例不会在调整大小时进行任何刷新。一个链接多个：How can I gracefully degrade CSS viewport units?

最后一个选项可能是通过javascript测试屏幕大小，并适应font-size。另一个链接 Is there any cross-browser javascript for making vh and vw units work

然而，您需要测试不同的字体大小以确保，仍然可以阅读它：）。

Answer 2

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

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

2 个答案: