Question

我的网站上有以下部分。问题是文本行没有响应。

如何将其转换为自适应文本？

以下是22＆＃34;屏幕：

以下是13＆＃34;屏幕：

以下是5,2＆＃34;手机屏幕：

<section id="three" class="wrapper style5">
                <div class="inner">
                <p>Do You Want To Join Our Team?</p>
                </div>
            </section>

.wrapper.style5 {
            background-color: #D22362;
            color: #fff;
            border-top: 0;
            text-align: center;
            font-size: 50px;
            background-image: url("images/airc1.jpg");

        }

Answer 1

添加line-height设置，例如120％：

＆＃13;

.wrapper.style5 {
            background-color: #D22362;
            color: #fff;
            border-top: 0;
            text-align: center;
            font-size: 50px;
            line-height: 120%;
            background-image: url("images/airc1.jpg");

        }

＆＃13;

<section id="three" class="wrapper style5">
                <div class="inner">
                <p>Do You Want To Join Our Team?</p>
                </div>
            </section>

＆＃13;

Answer 2

嗯，有几种选择。传统的答案可能是进行媒体查询@media screen and (max-width: 600px) { .style5 { font-size: 20px; }}并调整字体大小。您还可以调整行高，以便大文本在换行到新行时不会重叠。

但是，对于您可能想要使用的新css3，一个不太常见的选项是使用vw单位代替px font-size。 font-size: 3vw;或其他。

vw单位定义为视口宽度的1％（基本上是窗口宽度）。对于视口高度的1％，还有vh。随着窗口调整大小，字体大小将按比例调整大小。

＆＃13;

.wrapper.style5 {
            background-color: #D22362;
            color: #fff;
            border-top: 0;
            text-align: center;
            font-size: 50px; /* fallback */
            font-size: 3vw; /* new way, if supported */
            line-height: 120%;
            background-image: url("images/airc1.jpg");

        }

＆＃13;

<section id="three" class="wrapper style5">
                <div class="inner">
                <p>Do You Want To Join Our Team?</p>
                </div>
            </section>

＆＃13;

它在堆栈溢出预览中效果不佳，但是将其复制到测试页面并尝试一下，它可能正是您正在寻找的。

注意：虽然vw在现代浏览器中得到了坚实的支持，但它不是100％，所以你可能想要将它与后备选项配对，比如设置字体大小和行高，就像其他答案给出的那样吧也可以在大的时候优雅地扩展。

Answer 3

您可以使用Bootstrap自动设置任何设备的正确响应。

请参阅https://www.w3schools.com/bootstrap/

使文本行响应

3 个答案: