Question

请考虑我是CSS中的新手！

我正在尝试构建一个具有一些CSS属性的简单网页，但问题是我的网页在完全最大化的窗口中没有问题，但是当我尝试重新调整浏览器窗口大小时，设计会崩溃

网页来源：

<html>
<head>
<title>Registration From</title>
    <style type="text/css">
        body
        {
            background-color:#d2d2ff;
            margin:0;
            padding:0;
            width:100%;
        }

        header
        {
            margin:0px;
            padding:0px;
            height:90px;
            background-color:#a0b7e0;
            box-shadow:0px 0px 90px #00000f;
        }

        footer
        {
            margin-top:40%;
            height:40px;
            background-color:#a0b7e0;
            box-shadow:0px 0px 30px #00000f;
            position:relative;
        }

        .text_h
        {
            text-align:center;
            color:white;
            font-size:65px;
            text-shadow:2px 2px 1px #555555;
        }

        .text_f
        {
            text-align:center;
            color:#ffffff;
            font-size:15px;
            text-shadow:2px 2px 1px #555555;
            padding-top:0.7%;
        }

        cont1
        {   
            height:43%;
            width:12%;
            border:1px solid black;
            background-color:#c9c9c9;
            float:left;
            margin-top:2%;
            margin-left:1%;
            border-radius:7px; 
            box-shadow:0px 2px 15px #00000f;        
        }

        cont2
        {
            height:73%;
            width:84%;
            border:1px solid black;
            background-color:#e2e2e2;
            float:left;
            margin-top:2%;
            margin-left:2%;
            border-radius:7px; 
            box-shadow:0px 2px 15px #00000f;
            vertical-align: top;
        }

        .ql
        {
            text-align:left;
            color:#829fd7;
            font-size:20px;
            font-weight:bold;
            text-shadow:0px 0px 1px #ffffff;
            padding-left:4%;
        }

        .list
        {
            color:#1f1f1f;
            font-size:18px;
            text-shadow:0px 1px 1px #555555;
            list-style-type: circle;
        }

        a
        {
            text-decoration:none;
        }

        a:hover
        {
            color:white;
            font-weight:bold;
            padding-left:4%;
        }

    </style>
</head>
<body>
    <header>
        <div class="text_h">Basic Homepage</div>
    </header>
    <cont1>
        <p class="ql">Quick Links</p>
            <ul class="list">
                <li><a href="#home">Homepage</a></li><br>
                <li><a href="#contact">Contact Us</a></li><br>
                <li><a href="#abut">About Us</a></li><br>
                <li><a href="#msg">Message</a></li><br>
                <li><a href="#reg">Registration</a></li>
            </ul>
    </cont1>
    <cont2></cont2>
    <footer>
        <div class="text_f">&copy; 2014 Neeraj Singh</div>
    </footer>
</body>
</html>

任何人都可以建议我采取正确的方法吗？

Answer 1

您需要做的是使用CSS Media Queries在特定的屏幕大小断点处应用样式。应该是这样的：

@media screen和（min-width：### px）和（max-width：### px）{

/ *输入适用于此处的样式* /

}

将这些用于不同的屏幕尺寸。我用一部用于手机，一部用于平板电脑。这些可以位于样式表的顶部或底部。但为了便于阅读，请保持一致。

Answer 2

所以我看到你的代码存在一些问题，我肯定会继续修复：

1）<cont1>和<cont2>不是有效的HTML标记。如果要区分两个相同的标记，请使用classes or ids。

2）文档顶部缺少一些能够正确呈现页面的关键项。将<html>替换为<!DOCTYPE html>，并在<title>标记前添加以下meta tags： <meta charset='utf-8' /> <meta HTTP-EQUIV="Pragma" CONTENT="no-cache"> <meta HTTP-EQUIV="Expires" CONTENT="-1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

至于你的问题，这取决于你对设计何时发生故障的定义。＆＃39;如果您正在谈论标题的自动换行，则可以将mid-width应用于您的css，这会在屏幕变得太小时强制页面滚动。为避免将来出现此问题，您可以将min-width放在页面的html和body元素上。像：html, body { min-width:800px;}。希望有助于您入门！

元素在Window Resize上中断

2 个答案: