当访问者放大或缩小时,如何使内容自动随页面调整大小?

这仅是纯html,css和js代码。

我尝试使用“视口”标签,但仍然无法正确显示?

任何帮助是极大的赞赏。

     <!doctype html>
            <html>
                <head>


                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

                    <title>Search box with icon</title>

                </head>

                <style>


                    #dropdown{
                        border-top:thin solid  #e5e5e5;
                        border-right:thin solid #e5e5e5;
                        border-bottom:0;
                        border-left:thin solid  #e5e5e5;
                        box-shadow:0px 1px 1px 1px #e5e5e5;
                        float:left;
                        height:17px;
                        margin:.8em 0 0 5em;
                        outline:0;
                        padding:.4em 0 .4em .6em;
                        width:400px;
                    }

                    #dropdown-holder{
                        background-color:#f1f1f1;
                        border-top:thin solid #e5e5e5;
                        box-shadow:1px 1px 1px 1px #e5e5e5;
                        cursor:pointer;
                        float:left;
                        height:27px;
                        margin:11px 0 0 0;
                        text-align:center;
                        width:50px;
                    }

                    #dropdown-holder img{
                        margin:4px;
                        width:20px;
                    }

                    #search-text-input{
                        border-top:thin solid  #e5e5e5;
                        border-right:thin solid #e5e5e5;
                        border-bottom:0;
                        border-left:thin solid  #e5e5e5;
                        box-shadow:0px 1px 1px 1px #e5e5e5;
                        float:left;
                        height:17px;
                        margin:.8em 0 0 13em;
                        outline:0;
                        padding:.4em 0 .4em .6em;
                        width:400px;
                    }

                    #button-holder{
                        background-color:#f1f1f1;
                        border-top:thin solid #e5e5e5;
                        box-shadow:1px 1px 1px 1px #e5e5e5;
                        cursor:pointer;
                        float:left;
                        height:27px;
                        margin:11px 0 0 0;
                        text-align:center;
                        width:50px;
                    }

                    #button-holder img{
                        margin:4px;
                        width:20px;
                    }

                    #nav-body{
                      background-color: black;
                      height: 55px;
                      margin-top: -8px;
                      margin-left: -8px;
                      margin-right: -8px;

            }

            .product-box1{
              background-color: red;
              height: 300px;
              width: 300px;
              margin-top: 50px;
              margin-left: 50px;
            }

            .product-box2{
              background-color: red;
              height: 300px;
              width: 300px;
              margin-top: 50px;
              margin-left: 50px;
            }

            .product-box3{
              background-color: red;
              height: 300px;
              width: 300px;
              margin-top: -650px;
              margin-left: 480px;
            }

            .product-box4{
              background-color: red;
              height: 300px;
              width: 300px;
              margin-top: 50px;
              margin-left: 480px;
            }

            .product-box5{
              background-color: red;
              height: 300px;
              width: 300px;
              margin-top: -650px;
              margin-left: 900px;
            }

            .product-box6{
              background-color: red;
              height: 300px;
              width: 300px;
              margin-top: 50px;
              margin-left: 900px;
            }

            body{width:100%;}

            </style>

            <body>

            <input type='text' placeholder='Search...' id='search-text-input' />
            <div id='button-holder'>
                <img src='https://www.codeofaninja.com/demos/css-examples/textbox-with-search-icon-in-html-css/magnifying_glass.png' />
            </div>

            <input type='text' placeholder='Dropdown...' id='dropdown' />
            <div id='dropdown-holder'>
                <img src='https://www.codeofaninja.com/demos/css-examples/textbox-with-search-icon-in-html-css/magnifying_glass.png' />
            </div>

            <div id="nav-body">
            </div>

              <div class="product-box1">
                </div>

              <div class="product-box2">
                </div>

              <div class="product-box3">
                </div>

              <div class="product-box4">
                </div>

              <div class="product-box5">
                </div>

              <div class="product-box6">
                </div>

            </body>
            </html>


https://jsfiddle.net/Kitana16/5hz7u5up/3/

最佳答案

假设“访问者放大或缩小时”的意思是“适合窗口的宽度”,即为了使页面响应,那么最简单的方法是使用百分比而不是像素来描述宽度和高度。请理解,百分比指的是封闭块。对于宽度,通常是的宽度,但对于高度则不是。您还可以使用vw或视口宽度来获得一个既可以用于宽度又可以用于高度且一致的单位。

在您的示例中,您使用大的负边距来定位框。这不是布置一组盒子的有用方法。如果您希望按自己的方式放置它们,即一两对一地,三对跨,那么有很多方法可以做到这一点,但是一个简单的方法就是将三个容器水平放置,并分别放置三个容器可容纳两个盒子,一个在下一个之上。

我有一支笔可以显示我的意思。调整窗口大小时,框保持正方形。这是代码:

的HTML

<h1>Three stacked pairs of boxes</h1>
<h3>Displayed responsively</h3>
<div class="holder">
    <div class="box box1"></div>
    <div class="box box2"></div>
</div>
<div class="holder">
    <div class="box box3"></div>
    <div class="box box4"></div>
</div>
<div class="holder">
    <div class="box box5"></div>
    <div class="box box6"></div>
</div>


CSS:

.holder {
    display: inline-block;
}
.box {
    width: 26vw;
    height: 26vw;
    border: 1px solid black;
    margin-left: 5vw;
    margin-bottom: 5vw;
}
.box1 { background-color: red;}
.box2 { background-color: orange;}
.box3 { background-color: yellow;}
.box4 { background-color: green;}
.box5 { background-color: blue;}
.box6 { background-color: purple;}


这是笔:https://codepen.io/wahhabb/pen/MmGrvN

希望能有所帮助。

10-05 20:55
查看更多