Question

我一直在尝试使这个稍微自定义的自举旋转木马真正响应，以便英雄文本＆amp;按钮刻度正确。

我使用了网格和断点的混合，但我似乎无法正确地扩展，除非我使用20个断点来确保文本大小正确，因此它不会被推出图。

请参阅此笔以获取demo

 object NavigationBarUtils {
    // Location of navigation bar
    const val LOCATION_BOTTOM = 0
    const val LOCATION_RIGHT = 1
    const val LOCATION_LEFT = 2
    const val LOCATION_NONE = 3

    fun addLocationListener(activity: Activity, listener: (location: Int) -> Unit) {
        ViewCompat.setOnApplyWindowInsetsListener(activity.window.decorView) { view, insets ->
            val location = when {
                insets.systemWindowInsetBottom != 0 -> LOCATION_BOTTOM
                insets.systemWindowInsetRight != 0 -> LOCATION_RIGHT
                insets.systemWindowInsetLeft != 0 -> LOCATION_LEFT
                else -> LOCATION_NONE
            }
            listener(location)
            ViewCompat.onApplyWindowInsets(view, insets)
        }
    }
}

Answer 1

尝试一下：

检查演示HERE

在小屏幕上摆脱para。

使用font-responsive混合来使字体大小在定义的断点处响应。

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调整字体和行高，这是一个直接链接到用户视口当前宽度的属性，并将更新为视口大小更改。在此阶段它有pretty nice compatibility，但我会告诉您是否要支持旧版本的IE。

此外，您的所有旋转木马内容都是从旋转木马的顶部逃逸出来的。这是因为您使用绝对定位（可以）从旋转木马容器的底部强制内容一定量（这是不太好的）。因此，我们还将使用vw来定位该内容，但是来自容器的 top 。总的来说，我发现在CSS中定位时，从上到下工作会更好：

.carousel-caption {
        top: 7vw;

因此，内容的字体和位置始终自动与用户视口的宽度直接相关，这非常棒。我也将相同的想法应用于按钮周围的填充，以便根据需要调整尺寸。现在，当您点击不会自动看起来不错的断点时，您只需要在那里进行几个媒体查询，我可能会考虑更改两个列的宽度以适应更小的屏幕尺寸。

如何正确响应？

2 个答案: