Как я могу сделать это реагировать должным образом?

Question

Я пытался сделать эту слегка настраиваемую загрузочную карусель действительно отзывчивой, чтобы текст и кнопки героя корректно масштабировались.

Я использовал сочетание сетки и точек останова, но я просто не могу правильно масштабировать объекты, если не использую 20 точек останова, чтобы гарантировать, что текст имеет правильный размер, поэтому он не получаетвыталкивается из поля зрения.

См. эту ручку для демонстрации

<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

Попробуйте:

Проверьте демо ЗДЕСЬ

• Избавьтесь от 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:

подробнее о миксине, реагирующем на шрифты здесь

@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, чтосвойство, напрямую связанное с текущей шириной области просмотра пользователя, и будет обновляться при изменении размера области просмотра.На этом этапе у него довольно хорошая совместимость , но я оставлю на ваше усмотрение, хотите ли вы поддерживать более старые версии IE.

Кроме того, весь ваш карусельный контентубегал из верхней части карусели.Это связано с тем, что вы используете абсолютное позиционирование (что нормально), чтобы заставить содержимое заданного количества снизу контейнера карусели (что не так хорошо).Таким образом, мы также будем использовать vw для позиционирования этого содержимого, но из top контейнера.В целом, я считаю, что лучше работать сверху вниз, когда речь идет о позиционировании в CSS:

.carousel-caption {
        top: 7vw;

Так что при этом шрифты и расположение контента всегда автоматически напрямую связаны с ширинойиз области просмотра пользователя, которая является фантастической.Я также применил ту же идею к отступам вокруг кнопок, чтобы они также соответствовали нужным размерам.Теперь вам просто понадобится пара медиа-запросов, когда вы достигнете точек останова, которые автоматически выглядят не очень хорошо, и я, вероятно, рассмотрю возможность изменения ширины двух столбцов для меньших размеров экрана.