CSS媒体查询未还原

时间:2015-07-03 21:30:52

标签: html css

我正在尝试使用没有内容的div来模拟屏幕小于800像素时的链接中断,并且当我缩小浏览器时它工作正常,但是当我再次放大它时,div仍在模拟换行而不是不显示,我不知道它为什么不起作用。

    <div id="container">
        <div id="container-row">
            <div id="container-current">
                    <!-- Sets up the container for the video -->
                <video id="current-video" class="video-js vjs-default-skin vjs-big-play-centered"
                controls preload="auto" width="auto" height="auto"
                data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'>
                        <!-- Location of the video -->
                    <source src="sun1.mp4" type='video/mp4' />
                    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
                </video>
                        <!-- Location of the video -->
                    <source src="sun1.mp4" type='video/mp4' />
                </video>
            </div>

            <div id="container-inactive">
                <div class="image-row">
                        <div class="image-cell">
                            <img src="http://i.ytimg.com/vi/NpEaa2P7qZI/maxresdefault.jpg" alt="Placeholder">
                        </div>

                        <div class="image-cell">
                            <img src="http://i.ytimg.com/vi/NpEaa2P7qZI/maxresdefault.jpg" alt="Placeholder">
                        </div>

                        <div class="image-break"></div>

                        <div class="image-cell">
                            <img src="http://i.ytimg.com/vi/NpEaa2P7qZI/maxresdefault.jpg" alt="Placeholder">
                        </div>

                        <div class="image-cell">
                            <img src="http://i.ytimg.com/vi/NpEaa2P7qZI/maxresdefault.jpg" alt="Placeholder">
                        </div>
                </div>
            </div>
        </div>
    </div>


.video-js .vjs-tech {
    height:100% !important;
    position: relative !important;
}

body, html {
    margin:0;
    padding:0;
    background-color:black;
}

#container {
    margin:0;
    padding:0;
}

#container-current {
    width:50%;
    margin:0 auto;
}

#container-inactive {
    width:100%;
    display:table;
    border-collapse:separate;
    border-spacing:10px 30px;
}

.image row {
    display:table-row;
}

.image-cell {
    display:table-cell;
}

.image-cell img {
    width:100%;
}

.image-break {
    display:none;
}

@media only screen and (max-width: 800px) {
    .image-break {
        display:block;
    }
}

对于视频显示,我使用video.js

0 个答案:

没有答案