当访问者放大或缩小时，如何让我的内容自动调整大小？

时间：2017-05-13 03:52:40

标签： javascript html css viewport

当访问者放大或缩小时，如何让我的内容自动调整页面大小？

这是纯粹的html，css和＆amp;仅限js代码。

我尝试使用“viewport”标签，但我仍然无法正确使用它？

非常感谢任何帮助。

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

2 个答案:

答案 0 :(得分：0)

如果你想根据视口或窗口大小自动调整大小，请在下面的

中制作你的CSS 在evry CSS类中你必须使用max-widht：你的宽度+每次宽度：100％这将启用响应使用，因此可用于缩放，调整大小等 

#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; 
                    max-width:400px; // max-width
                    width: 100%; // width 100%
                }

                #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;
                    max-width:50px; // max-width
                    width: 100%; // width 100%
                }

                #dropdown-holder img{
                    margin:4px;
                    max-width:20px; // max-width
                    width: 100%; // width 100%
                }

                #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; 
                    max-width:400px; // max-width
                    width: 100%; // width 100%
                }

                #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;
                    max-width:50px; // max-width
                    width: 100%; // width 100%
                }

                #button-holder img{
                    margin:4px;
                    max-width:20px; // max-width
                    width: 100%; // width 100% 
                }

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

        }

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

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

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

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

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

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

答案 1 :(得分：0)

假设“访问者放大或缩小时”的含义是“适合窗口的宽度”，即您的页面要响应，那么最简单的方法是使用百分比而不是像素来描述宽度和高度。请理解百分比是指封闭块。对于宽度，通常是宽度，但不是高度。您还可以使用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

希望有所帮助。

相关问题
最新问题