Question

我正在尝试创建一个响应式网站。我所拥有的问题是当我使窗口变小（这是好的）时图像宽度的尺寸减小但是图像上的文本移动到不同的位置。在减小窗口大小时，如何将文本和图像缩小到一起。

<div class="row">
        <div class="column1">
            <img src="">
            <div class="row-welcome">
                <h1>Welcome</h1>
                <p>Hello, Welcome to my web site</p>
            </div>
        </div>
    </div>

.row-welcome p {
color: blue;
margin-top: -100px;
margin-left: 200px;
font-size: 10px;

}

Answer 1

您可以使用vw。除了opera mini和IE的一些问题，它在每个浏览器中都受支持。 http://www.sitepoint.com/new-css3-relative-font-size/和http://caniuse.com/#feat=viewport-units

如果使用vw不适合您，可以使用@media查询来更改正文字体大小。

您还需要将所有值（以像素为单位）更改为％，em，vw或某些相对值，以便在缩放时将它们全部放在相同的比例上。

我建议你设置最小和最大字体大小和/或测试不同的屏幕分辨率（从480 * 320手机到2560 * 1440），否则你可能会有意想不到的结果。

响应式网站 - 文本缩放

1 个答案: