响应式网站 - 文本缩放

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）上进行测试，否则您可能会得到意想不到的结果。