Question

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

这是我的HTML的{{1}}代码，其中还包含main div container，其中包含div个内容：

<section>

CSS应该如何使其响应，以便它不会超出窗口的宽度，但（例如）折叠表数据？让我知道你认为解决这个问题会更好。

内容的每个项目（例如图片，倒计时，表格......）都超出了窗口的宽度。

这是最相关的CSS：

容器：

<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>

主：

/* 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;
    }

}

供参考，以下是网站：http://infntest.altervista.org/index.html。

Answer 1

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

响应表很痛苦。

我会选择div而不是根据视口相应更改这些div的属性。

查看引导实现的http://codepen.io/SitePoint/pen/raXdwZ或响应表示例的https://css-tricks.com/examples/ResponsiveTables/responsive.php。

Answer 2

从您提供的链接中我可以看到您的整个.container课程已不在屏幕上。尝试将box-sizing: border-box; css属性添加到.container课程中，这应该可以解决您的问题。

box-sizing: border-box; css属性包括填充和宽度计算的边框，因此您编写width:100%; padding-left:15px;您有100％-15px的内容和15px的填充而不是100％的内容和额外的15px填充。 more info here

Answer 3

使用footable，它对于设计响应表非常有用

http://fooplugins.com/plugins/footable-jquery/

窗外的内容

3 个答案: