使用媒体查询将两个部分合二为一

Posted 2023-03-06

【中文标题】使用媒体查询将两个部分合二为一

【英文标题】：Turning two sections into one using media query

【发布时间】：2015-01-20 00:26:19

【问题描述】：

我正在使用 multiscroll.js jquery 插件 (https://github.com/alvarotrigo/multiscroll.js)。 它工作得很好。但是，在一定的浏览器宽度下，它会崩溃。所以我希望它被“禁用”，并且只在一定的浏览器宽度后显示每个部分的一侧。 喜欢此页面上的示例：http://www.reverzo.tymberry.com/

这是小提琴：http://jsfiddle.net/929u1za0/ 我可怜的尝试： html

<div id="myContainer">

    <div class="ms-left">
        <!-- Section 1 left -->
        <div class="ms-section section1 ms-table active" data-anchor="first" style="height: 100%; background-color: rgb(255, 255, 255);">
            <div class="ms-section-content">
                <h1>Section 1 left</h1>
            </div><!-- /.ms-section-content -->
        </div><!-- /.ms-section -->

        <!-- Section 2 left -->
        <div class="ms-section section2 ms-table" data-anchor="second" style="height: 100%; background-color: rgb(255, 255, 255);">
        <div class="ms-section-content">
            <h1>Section 2 left</h1>
        </div><!-- /.ms-section-content -->
      </div><!-- /.ms-section -->
    </div><!-- /.ms-left -->

    <div class="ms-right">
        <!-- Section 1 right -->
        <div class="ms-section section1 ms-table active" data-anchor="first" style="height: 100%; background-color: rgb(255, 255, 255);">
        <div class="ms-section-content">
            <div class="ms-section-content">
                <h1>Section 1 right</h1>
            </div><!-- /.ms-section-content -->
        </div><!-- /.ms-section -->

        <!-- Section 2 right -->
        <div class="ms-section section2 ms-table" data-anchor="second" style="height: 100%; background-color: rgb(255, 255, 255);">
           <div class="ms-section-content">
                <h1>Section 2 right</h1>
            </div><!-- /.ms-section-content -->
        </div><!-- /.ms-section -->
    </div><!-- /.ms-right -->   
</div><!-- #myContainer -->

CSS

/**
 * multiscroll 0.0.6 Beta
 * https://github.com/alvarotrigo/multiscroll.js
 * MIT licensed
 *
 * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
 */
.ms-section 
    position: relative;
    @include box-sizing(border-box);


.ms-section.ms-table
    display: table;
    width: 100%;


.ms-tableCell 
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;


.ms-easing 
    @include transition(all 0.7s ease-out);


/* Custom styles */
.ms-section 
    text-align: center;


/* The media query */
@media screen and (max-width: 700px) 
    .ms-section section2 
        display: none;
    

感谢您的任何帮助！谢谢！！

更新： 为什么只显示左侧部分 1 和右侧部分 2 不起作用？

       @media screen and (max-width: 700px) 
            .ms-left .section1, 
            .ms-right .section2 
                width: 100% !important;   
            
        

【问题讨论】：

有一个选项可以将每个部分的两侧都变成一个全角部分。 Demo here.

很高兴知道！谢谢！

【参考方案1】：

您必须将媒体查询更新为：

@media screen and (max-width: 700px) 
    .ms-left, .ms-right 
        width: 100% !important;   
    

小提琴：http://jsfiddle.net/929u1za0/1/

【讨论】：

您能否告诉我如何更改媒体查询，如果我希望显示第 1 节右侧，然后显示第 2 节左侧等等？

还有一个问题。滚动方向相反。如果我向下滚动内容来自顶部...

此媒体查询将部分的宽度更新为 100% 指定宽度。

我明白了。但是为什么我的媒体查询不起作用呢？我更新了问题。

检查了代码，我看到它滚动到同一部分的元素。您可以添加.ms-right display: none; 滚动到左侧而不是右侧。