Question

我实际上正处于学习如何为网站构建响应式设计的初期阶段，并在下面提供我的代码，我面临的一个问题是，当我尝试缩放网站时，Chrome中500％的内容混乱。我该如何解决？在浏览器中，当我看到下面的代码时，直到达到400％的缩放比例时，它才会响应，但是当我将其缩放到500％时，它看起来很混乱。我需要一种使容器也随着缩放而增长的方法，为此，我尝试使用min-height，但是min-height的问题在于嵌套的div元素不继承高度包含元素，因此此后，当我将%用于min-height时，它不起作用，它采用基于内容的高度值。我该怎么做才能使其具有响应性？

<!Doctype html>
<html lang="eng">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Coloured Pages</title>
    <style>
        body {
            font-family: helvetica, serif, sans-serif;
            font-size: 11px;
            min-height: 100vh;
        }

        .container {
            width: 90%;
            min-height: 100vh;
            margin: 0 auto;
            background-color:#f4f4f4;
            box-sizing: border-box;
            border: 2px solid black;
        }

        .top {
            width: 100%;
            min-height: 10vh;
            background-color: red;
            text-align: center;
            font-size: 1em;
            box-sizing: border-box;
            overflow: auto;

         }

         .left {
            background-color: yellow;
            box-sizing: border-box;
            font-size: 1.3em;
            width: 100%;
            min-height: 15vh;
            overflow: auto;
         }

         .left > ul li, .right > ul li{
            width: 40%;
            float: left;
            margin-right: auto;

          }

        .center {
            background-color: white;
            box-sizing: border-box;
            padding: 0 0.5em;
            width: 100%;
            min-height: 50vh;
            overflow: auto;
         }

         .bodyText {
            box-sizing: border-box;
            font-size: 1.125em;
            overflow: auto;
         }

         .right {
            background-color: pink;
            box-sizing: border-box;
            padding: 0.25em 0.5em;
            font-size: 1.5em;
            width: 100%;
            min-height: 15vh;
            overflow: auto;
         }

         .footer {
            width: 100%;
            min-height: 10vh;
            box-sizing: border-box;
            background-color: blue;
            padding: 0.9em 0.25em;
            font-size: 1.25em;
            overflow: auto;
         }

         @media screen and (min-width: 375px) {
            body {
                font-size: 12px;
            }

            .center {
                min-height: 45vh;
            }

            .right {
                min-height: 20vh;
             }

            .footer {
                padding: 0.5em 0.25em;
            }
        }

        @media screen and (min-width: 768px) {
            body {
                font-size: 14px;
            }

            .left, .center{
                width: 50%;
                float: left;
                min-height: 60vh;
            }

            .right {
                clear: both;
            }

            .left, .right {
                position: relative;
            }

            .left > ul {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -100%);
            }

            .right > ul {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

          .left > ul li, .right > ul li {
                width: 100%;
                float: none;
                margin: auto;
            }
        }

        @media screen and (min-width: 1440px) {
            body {
                font-size: 16px;
            }

            .left {
                width: 20%;
                min-height: 80vh;

             }

             .center {
                width: 60%;
                min-height: 80vh;

             }

             .right {
                clear: none;
                float: left;
                width: 20%;
                min-height: 80vh;

             }

             .footer {
                clear: both;
                padding: 1.5em 0.25em;

             }
         }

    </style>
</head>

<body>
    <div class="container">
        <div class="top">
                INDRA GANDHI NATIONAL OPEN UNIVERSITY<br>
                SOCIS
        </div>
        <div class="left">
            <ul>
                <li><a href="about.html">About Us</a></li>
                <li>Programme</li>
                <li>Results</li>
                <li>Contact Us</li>
             </ul>
        </div>
        <div class="center">
            <h3>Table Less DIV Based Layout using Float</h3>
            <p class="bodyText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies at, vulputate id lorem. Nulla facilisi.
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies at, vulputate id lorem. Nulla facilisi.
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies at, vulputate id lorem. Nulla facilisi.
            </p>
        </div>
        <div class="right">
            Event
            <ul style="margin-top: 0px;">
                <li>BCS 053</li>
                <li>Datesheet</li>
                <li>Prospectus</li>
            </ul>
        </div>
        <div class="footer">
            &copy; SOCIS IGNOU Design and Developed by Praveen Kumar
        </div>
    </div>
</body>
</html>

当我按“ Ctrl +”时，如何给出下面给出的响应代码

0 个答案: