html - 全响应式Jumbotron接头

我有一个利用Bootstrap 3和Jumbotron标头的Wordpress网站。我对使用skrollr.js的导航和背景具有视差效果。

我为媒体查询（768px）设置了不同的大小。屏幕尺寸大于768像素时，高度为40％。屏幕尺寸较小时为25％。

现在，当屏幕改变时，巨无霸会“跳到”不同的尺寸。我希望它随着屏幕的缩小和拉伸而逐渐改变大小。通常，我会使用百分比来完成此操作，但是当我输入“最小高度：40％”时，超大屏幕的高度将变为0。

标头html

<div class="container-fluid">
<div class="jumbotron" data-0="background-position:0px -50px;" data-350="background-position:0px 100px;">

<header id="skrollr-body">
        <nav class="navbar navbar-custom" role="navigation" data-0="opacity: 1" data-50="opacity: 0">
            <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">

                <div class="navbar-brand">
                    <?php if (get_theme_mod(FT_scope::tool()->optionsName . '_logo', '') != '') { ?>
                        <a class="mylogo" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><img relWidth="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxWidth', 0)); ?>"  relHeight="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxHeight', 0)); ?>" id="ft_logo" src="<?php echo get_theme_mod(FT_scope::tool()->optionsName . '_logo', ''); ?>" alt="" /></a>
                    <?php } else { ?>
                        <h1 class="site-title logo"><a id="blogname" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
                    <?php } ?>
                    </div>
                </div>

...

CSS是

.jumbotron {
min-height: 40%;
text-align: center;
margin: 0px;
padding: 30px 40px;
background: url('../img/homeBG.jpg') no-repeat center center;
background-size: 100%;
background-color: #f4f4f5;
}

最佳答案

使用CSS过渡。向每个媒体特定的.jumbotron CSS添加过渡，就像这样

...media query... {
    .jumbotron {
        transition: min-height 1s;
        min-height: 40%;
        ....rest of css...
    }
}

关于html - 全响应式Jumbotron接头，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29715953/