Question

当我在浏览器中加载页面时，除宽度外，其所有内容都非常小。最奇怪的是，当我打开Chrome DevTools窗口并将视图更改为“响应”，或者将其加载到移动设备上时，几乎所有内容都可以。我寻找了一些解决方案，并尝试修复它，但没有成功。

HTML：

<!DOCTYPE html>
<html lang="pl">
<head>...</head>
<body>

    <div class="content">

        <div id="head">
            <div id="header"><h1>Title</h1></div>
        </div>

        <ul id="naviBar">
            <li><a href="home.php">Home</a></li>
            <li><a href="index.php">About</a></li>
            <li><a href="sign_in.php">Account</a>
            </li>
        </ul>

        <div class="home">
            <div class="title">
                <h2>How it works?</h2>
            </div>

            <div class="text">That's easy! Sign up and get access to all the recipes! Add, delete or edit your recipes!</div>



            <div class="guide_button">
                <h2>Check the guide!</h2>
            </div>

            <ol class="guide_ol">
                    <li>Step 1</li>
                <img class="guide_img" src="guide_sign_up.JPG" alt="guide">
                    <li>Step 2</li>
                <img class="guide_img" src="guide_sign_up.JPG" alt="guide">
                    <li>Step 3</li>
                <img class="guide_img" src="guide_sign_up.JPG" alt="guide">
            </ol>
        </div>

        <div class="sign_button">
            <h2><a href="sign_in.php">Sign up!</a></h2>
        </div>

        <footer class="foo">
            <text class="foo_text">Contact:<br>jannec1290@gmail.com<br></text>
        </footer>

    </div>

</body>

主要 CSS：

    html {
      height: 100%;
    }
    body{
        background-color: #000;
        font-size: 20px;
        font-family: 'Bellefair', serif;
        color: #ccc;
        min-width: 329px;
        padding: 20px 0;
    }
    a{
        text-decoration: none;
        color: inherit;
    }
    a:hover{
        text-decoration: none;
        color: inherit;
    }
    .content{
        width: 100%;
        margin: auto;
        background-color: #ccc;
        overflow: hidden;
    }
    .home{
        background-color: rgba(47, 47, 47, 0.2);
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        color: #4b4b4b;
        height: auto;
    }
    .guide_button{
        text-align: center;
        padding: 20px;
        background-color: #8e8e8e;
        margin: 20px;
    }
    .sign_button:hover{
        background-color: #9e9e9e;
    }
    .sign_button{
        display: none;
        text-align: center;
        padding: 20px;
        background-color: #8e8e8e;
        margin: auto;
    }
    .sign_button:hover{
        background-color: #9e9e9e;
    }
    .guide_img{
        width: 100%;
        height: auto;
        margin-bottom: 20px;
    }
    .guide_ol{
        text-align: center;
        margin: auto;
        display: none;
    }
    .foo{
        background-color: rgba(21,21,21,0.9);
        color: #8c8c8c;
        padding: 20px;
    }
    .foo::after{
        content: "\00a9 2017 created by Jan Witkowski";
        line-height: 1.2em;
    }
    @media screen and (min-width: 950px) {
        .content{
            width: 90%;
        }
    }

CSS的其余部分分为单独的文件，因此如果您想在我的网站上查看，编写或检查它。

以下是“移动设备”的视图：

和“正常观点”：

Answer 1

在reset.css文件的代码中，您有以下代码：

/* Reset styles for all structural tags */
a, abbr, area, article, aside, audio, b, bdo, blockquote, body, button, 
canvas, caption, cite, code, col, colgroup, command, datalist, dd, del, 
details, dialog, dfn, div, dl, dt, em, embed, fieldset, figure, form,
h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, 
input, ins, keygen, kbd, label, legend, li, map, mark, menu, meter, nav,
noscript, object, ol, optgroup, option, output, p, param, pre, progress,
q, rp, rt, ruby, samp, section, select, small, span, strong, sub, sup, 
table, tbody, td, textarea, tfoot, th, thead, time, tr, ul, var, video {
    border: 0;
    font-size: 30px;
    font: inherit;
    margin: 0;
    outline: none;
    padding: 0;
    text-decoration: none;
    vertical-align: baseline;
    z-index: 1;
}

删除或更改显示font: inherit;

的部分

Div容器有意想不到的大小

1 个答案: