html - 窗口外的内容

Question

我正在制作一个网站，它应该是响应式的，但我的全部内容却在某些屏幕上超出了窗口的宽度。这不应该发生。

这是 HTML我的代码 main div其中还包含一个 container div在每个 <section> 里面:

<div id="main">

        <!-- Navigation Bar -->
        <div id='cssmenu'>
            <!-- Code cut -->
        </div>
        <!-- / Navigation Bar -->

            <!-- Intro -->
                <section id="top" class="one dark cover">
                    <div class="container">

                        <header>
                            <!-- Code cut -->
                        </header>   
                    </div>

CSS 应该是什么样子才能让它具有响应性，这样它就不会超出窗口的宽度，而是(例如)折叠表格数据？让我知道您认为可以更好地解决此问题。

内容的每一项(例如图像、倒计时、表格..)都超出了窗口的宽度。

这是最相关的 CSS:

容器:

/* Containers */

.container {
    margin-left: auto;
    margin-right: auto;
}

.container.\31 25\25 {
    width: 100%;
    max-width: 1750px;
    min-width: 1400px;
}

.container.\37 5\25 {
    width: 1050px;
}

.container.\35 0\25 {
    width: 700px;
}

.container.\32 5\25 {
    width: 350px;
}

.container {
    width: 1400px;
}

@media screen and (min-width: 961px) and (max-width: 1880px) {

    .container.\31 25\25 {
        width: 100%;
        max-width: 1500px;
        min-width: 1200px;
    }

    .container.\37 5\25 {
        width: 900px;
    }

    .container.\35 0\25 {
        width: 600px;
    }

    .container.\32 5\25 {
        width: 300px;
    }

    .container {
        width: 1200px;
    }

}

@media screen and (min-width: 961px) and (max-width: 1620px) {

    .container.\31 25\25 {
        width: 100%;
        max-width: 1200px;
        min-width: 960px;
    }

    .container.\37 5\25 {
        width: 720px;
    }

    .container.\35 0\25 {
        width: 480px;
    }

    .container.\32 5\25 {
        width: 240px;
    }

    .container {
        width: 960px;
    }

}

@media screen and (min-width: 961px) and (max-width: 1320px) {

    .container.\31 25\25 {
        width: 100%;
        max-width: 125%;
        min-width: 100%;
    }

    .container.\37 5\25 {
        width: 75%;
    }

    .container.\35 0\25 {
        width: 50%;
    }

    .container.\32 5\25 {
        width: 25%;
    }

    .container {
        width: 100%;
    }

}

@media screen and (max-width: 960px) {

    .container.\31 25\25 {
        width: 100%;
        max-width: 125%;
        min-width: 100%;
    }

    .container.\37 5\25 {
        width: 75%;
    }

    .container.\35 0\25 {
        width: 50%;
    }

    .container.\32 5\25 {
        width: 25%;
    }

    .container {
        width: 100%;
    }

}

@media screen and (max-width: 736px) {

    .container.\31 25\25 {
        width: 100%;
        max-width: 125%;
        min-width: 100%;
    }

    .container.\37 5\25 {
        width: 75%;
    }

    .container.\35 0\25 {
        width: 50%;
    }

    .container.\32 5\25 {
        width: 25%;
    }

    .container {
        width: 100% !important;
    }

}

主要内容:

/* The main content */

.main-content {
font-family: Arial, Helvetica, sans-serif;
max-width: 600px;
padding-top: 40px;
margin: 0 0 40px 260px;
}

作为引用，这里是网站:http://infntest.altervista.org/index.html .

Answer 1

您应该尝试使用 Bootstrap。它有一个 table-responsive 类可以解决您的问题。

响应式表格很痛苦。

我会改用 div，并根据视口(viewport)相应地更改这些 div 的属性。

看看http://codepen.io/SitePoint/pen/raXdwZ对于 Bootstrap 实现或 https://css-tricks.com/examples/ResponsiveTables/responsive.php一个响应表的例子。