如何正确响应？

Question

我一直在努力使这个稍微自定义的引导轮播真正响应，以便英雄文本和按钮正确缩放。

我混合使用了网格和断点，但我似乎无法正确缩放事物，除非我使用 20 个断点来确保文本大小合适，以免被挤出查看。

查看此笔以获取demo

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="overlay"></div>
            <img class="d-block w-100" src="https://s3.eu-west-2.amazonaws.com/spindogs/header-image-min.png" alt="First slide">
            <div class="carousel-caption">
                <div class="row">
                    <div class="col text-left px-3 ">
                            <h1>Maecenas gravida</h1>
                            <h1 class="mb-4">auctor suscipit.</h1>
                            <div class="restrct">
                                <p class="lead-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fusce placerate vulputate pulvinar. Maecenas gravida auctor suscipit.</p>
                            </div>
                    </div>
                    <div class="col d-flex justify-content-center align-items-end">
                        <button class="btn btn-default btn-lg">Get a free quote NOW!</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="overlay"></div>
            <img class="d-block w-100" src="https://s3.eu-west-2.amazonaws.com/spindogs/header-image-min.png" alt="First slide">
            <div class="carousel-caption">
                <div class="row">
                    <div class="col text-left px-3 ">
                            <h1>Maecenas gravida</h1>
                            <h1 class="mb-4">auctor suscipit.</h1>
                            <div class="restrct">
                                <p class="lead-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fusce placerate vulputate pulvinar. Maecenas gravida auctor suscipit.</p>
                            </div>
                    </div>
                    <div class="col d-flex justify-content-center align-items-end">
                        <button class="btn btn-default btn-lg">Get a free quote NOW!</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="overlay"></div>
            <img class="d-block w-100" src="https://s3.eu-west-2.amazonaws.com/spindogs/header-image-min.png" alt="First slide">
            <div class="carousel-caption">
                <div class="row">
                    <div class="col text-left px-3 ">
                            <h1>Maecenas gravida</h1>
                            <h1 class="mb-4">auctor suscipit.</h1>
                            <div class="restrct">
                                <p class="lead-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fusce placerate vulputate pulvinar. Maecenas gravida auctor suscipit.</p>
                            </div>
                    </div>
                    <div class="col d-flex justify-content-center align-items-end">
                        <button class="btn btn-default btn-lg">Get a free quote NOW!</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <img class="d-block position-absolute w-100 shape" src="https://s3.eu-west-2.amazonaws.com/spindogs/Header_shape.png" alt="shape">
</div>

$primary: #e82036;
$dark: #494949;
$light: #7d7d7d;
.slide {
    width: 100%; 
    .overlay {
        width:100%;
        height:100vh; 
        background: linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
        position:absolute;
        z-index:10;
    }
    .carousel-indicators {
        margin: 0;
    width: 15%;
    right: 0;
    top: 0;
    left: unset;
    justify-content: center;
    align-items: center;
    display: flex;
    bottom: 0;
    flex-direction: column;
    li {
        &.active {
            background-color:$primary;
        }
        margin: 10px 0;
        border-radius:50%;
        padding:10px; 
        width:5px;
            height:5px;
    }
}
    .carousel-caption {
        bottom:40%;
        h1 {
            line-height:2.2rem;
        }
        button {
            padding: 1.2rem 2rem;
        border-radius: 50px;
            background-color:$primary;
            border-color:$primary;
            color:#fff;
            &:hover, :active {
                background-color:darken($primary, 10%);
                border-color:darken($primary, 10%);
            }
        }
        .restrict {
            text-align:left;
            width:70%;
        }
        .lead-text {
            color:#fff;
            margin:0;
        }
    }
}

Answer 1

试试这个：

查看演示HERE

• 摆脱小屏幕上的para。
• 使用font-responsive mixin 使字体大小在定义的断点之间响应。

HTML：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="overlay"></div>
            <img class="d-block w-100" src="https://s3.eu-west-2.amazonaws.com/spindogs/header-image-min.png" alt="First slide">
            <div class="carousel-caption d-sm-flex text-center text-sm-center justify-content-center align-items-end flex-sm-row h-100">
                <div class="text-center text-sm-left  px-3">
                    <h1>Maecenas gravida</h1>
                    <h1 class="mb-2 mb-sm-2">auctor suscipit.</h1>
                    <div class="restrct d-none d-sm-block">
                        <p class="lead-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fusce placerate vulputate pulvinar. Maecenas gravida auctor suscipit.</p>
                    </div>
                </div>
                <div>
                    <button class="btn btn-default btn-lg">Get a free quote NOW!</button>
                </div>

            </div>
        </div>
        <div class="carousel-item">
            <div class="overlay"></div>
            <img class="d-block w-100" src="https://s3.eu-west-2.amazonaws.com/spindogs/header-image-min.png" alt="First slide">
            <div class="carousel-caption d-sm-flex text-center text-sm-center justify-content-center align-items-end flex-sm-row h-100">
                <div class="text-center text-sm-left  px-3 ">
                    <h1>Maecenas gravida</h1>
                    <h1 class="mb-2 mb-sm-2">auctor suscipit.</h1>
                    <div class="restrct d-none d-sm-block">
                        <p class="lead-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fusce placerate vulputate pulvinar. Maecenas gravida auctor suscipit.</p>
                    </div>
                </div>
                <div>
                    <button class="btn btn-default btn-lg">Get a free quote NOW!</button>
                </div>

            </div>
        </div>
        <div class="carousel-item">
            <div class="overlay"></div>
            <img class="d-block w-100" src="https://s3.eu-west-2.amazonaws.com/spindogs/header-image-min.png" alt="First slide">
            <div class="carousel-caption d-sm-flex text-center text-sm-center justify-content-center align-items-end flex-sm-row h-100">
                <div class="text-center text-sm-left  px-3 ">
                    <h1>Maecenas gravida</h1>
                    <h1 class="mb-2 mb-sm-2">auctor suscipit.</h1>
                    <div class="restrct d-none d-sm-block">
                        <p class="lead-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fusce placerate vulputate pulvinar. Maecenas gravida auctor suscipit.</p>
                    </div>
                </div>
                <div>
                    <button class="btn btn-default btn-lg">Get a free quote NOW!</button>
                </div>

            </div>
        </div>

    </div>
    <img class="d-block position-absolute w-100 shape" src="https://s3.eu-west-2.amazonaws.com/spindogs/Header_shape.png" alt="shape">
</div>

CSS：

更多关于字体响应混合here

@mixin font-responsive($fmin, $fdiff, $breakmin, $breakmax) {
    font-size: calc(
        #{$fmin} + #{$fdiff} * ((100vw - #{$breakmin}) / #{$breakmax})
    );
    @media (max-width: $breakmin) {
        font-size: $fmin;
    }
    @media (min-width: round($breakmin + $breakmax)) {
        font-size: round($fmin + $fdiff);
    }
}

$primary: #e82036;
$dark: #494949;
$light: #7d7d7d;
.slide {
    width: 100%;
    .overlay {
        width: 100%;
        height: 100%;
        background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0) 100%
        );
        position: absolute;
        z-index: 10;
    }
    .carousel-indicators {
        margin: 0;
        width: 15%;
        right: 0;
        top: 0;
        left: unset;
        justify-content: center;
        align-items: center;
        display: flex;
        bottom: 0;
        flex-direction: column;
        li {
            &.active {
                background-color: $primary;
            }
            margin: 10px 0;
            border-radius: 50%;
            padding: 10px;
            width: 5px;
            height: 5px;
        }
    }
    .carousel-caption {
        padding-bottom: 12%;
        padding-top: 12%;
        h1 {
            line-height: 1.6;
            @include font-responsive(16px, 12, 420px, 1200);
        }
        button {
            padding: 0 18px;
            border-radius: 50px;
            line-height: 3;
            background-color: $primary;
            @include font-responsive(12px, 10, 420px, 1200);
            border-color: $primary;
            color: #fff;
            &:hover,
            :active {
                background-color: darken($primary, 10%);
                border-color: darken($primary, 10%);
            }
        }
        .restrict {
            text-align: left;
        }
        .lead-text {
            color: #fff;
            margin: 0;
            @include font-responsive(12px, 10, 420px, 1200);
        }
    }
}

Answer 2

我在这里为你举了几个例子：https://codepen.io/anon/pen/aKOpGd?editors=1100

主要区别在于我使用vw 调整字体和行高的大小，vw 是一个直接链接到用户视口当前宽度的属性，并且会随着视口大小的变化而更新。在这个阶段它有pretty nice compatibility，但我会让你决定是否要支持旧版本的IE。

此外，您的所有轮播内容都从轮播顶部溢出。这是因为您正在使用绝对定位（这没关系）来强制内容从轮播容器底部设置一定数量（这不太好）。所以我们也将使用vw 来定位该内容，但从容器的top 开始。总的来说，在 CSS 中定位时，我发现从上往下工作会更好：

.carousel-caption {
        top: 7vw;

因此，内容的字体和位置总是自动与用户视口的宽度直接相关，这太棒了。我还对按钮周围的填充应用了相同的想法，以便它也可以根据需要调整大小。现在，您只需要在其中进行几个媒体查询，因为您遇到了不会自动看起来很好的断点，我可能会考虑更改两列的宽度以适应更小的屏幕尺寸。