Question

如果我缩小/在我的网站中使用谷歌浏览器（ctrl - / +），那么我可以注意到我的网站布局开始了＃34;分开＆＃34;因为我所有的div都开始转移。我显然不想要这个，只是希望当人们放大或缩小时网站保持不变，就像所有好网站一样哈哈。

<section class="container-fluid">

    <div class="row">
        <div class="col-sm-6 padding-0">

            <img src="/images/main.jpg" alt="img"  class="img-responsive">

        </div>

        <div class=" col-sm-6 padding-0">
            <!--<div class="row">-->
            <!--<div class="col-md-12">-->
            <div class="middle1">
                <div class="middle2">
                    <h2>Casa uPVC Doors and Windows</h2>

                    <p style="display: inline-block">
                        Casa windows is a specialized product from Lancet Glass-LG TUFF family.Casa windows are
                        fabricated from <span class="blue">Indo-German uPVC profiles technology</span>.The top Quality breakthrough product
                        would be tailor made and is designed to exceed customer expectations.Top end manufacturing
                        standards through rigid quality control processes sets us apart, and gives Casa windows the
                        competitive edge.Casa windows will always strive to be customer centric and customer focused,
                        and believes in quality as its culture.
                    </p>
                </div>
                <div>
                    <h5 class="middle3">"Customer Satisfaction is Where We Begin"</h5>
                    <br/>
                </div>
            </div>


            <!--<div class="row">-->
            <div class="mid3">


                <div class="mid1 ">
                    <h4>Request a Call Back</h4>
                </div>

                <div class="marge">
                <form class="form-inline">
                    <div class="form-inline">

                        <input type="text" class="form-control" id="email" placeholder="name">



                        <input type="email" class="form-control" id="pwd" placeholder="email">
                    </div>

                    <div class="form-inline" style="margin-top:8px">

                        <input type="number" class="form-control" id="email" placeholder="phone number">



                        <input type="text" class="form-control" id="email" placeholder="Location">
                    </div>

                    <button type="submit" class="stop" style="margin-top:8px">Submit</button>
                </form>
                </div>




            </div>
        </div>


    </div>
</section>

样式：

body{
  font-family: 'Times New Roman', Times, serif;
}
.lastt{
  font-family: 'Times New Roman', Times, serif;
}

.blue{
  text-decoration: underline;
  text-decoration-color:#0890c9;
  font-weight: 700;
}


.title{
  padding-top:20px;
  font-weight:700;
  font: 13px;
}
.h44,.h55,.h66{
  display: inline-block;
}
.h5{
  padding-top: 18px;
}
.main{
  height:80px;
}
.middle1{
  background-color: #034ea2;

}
.form-inline > * {
  margin:8px 5px !important;
}
.middle2{
  color: #ffffff;
  padding-left: 15px;
  padding-right: 10px;
  padding-top: 15px;
  text-align: justify;
  text-justify: inter-word;
  font-family: 'Times New Roman', Times, serif;

}
.para{
  text-align: justify;
  text-justify: inter-word;
  font-family: 'Times New Roman', Times, serif;
  font-weight: 500;
}
.marge{
  margin-top: 10px;
}
.head1{
  font-family: 'Times New Roman', Times, serif;
  font-weight: 500;
}
.middle3{
  text-align: center;
  color: #ffffff;
  font-weight: 600;
  font-family: 'Times New Roman', Times, serif;
}
.mid2{
  display: inline-block;
}
.mid3{
  background-color:#0890c9;
  padding-left: 15px;
  padding-right: 10px;
  padding-top: 5px;
  color: #ffffff;

}
.mid1{
  font-family: 'Times New Roman', Times, serif !important;
}

.input{
  margin-top: 15px;
}
.stop
{
 border-radius: 5px;
  background-color:#034ea2;
  color: #ffffff;
  font-weight: 600;
  border-color: red;
  height:32px;
  border-width: 1px;
}
.blo{
  height:"30px";
  background-color: #034ea2;
  padding-top: 10px;
  padding-bottom: 10px;

}
.border{
  border-right: 1px solid #0890c9;
}
.im1{
  padding-top: 8px;
  padding-left: 8px;

}

.siz{
  width: 40px;
}
.textt{
  font-size: 15px;
  color:#ffffff;
  font-family: 'Times New Roman', Times, serif !important;


}

.set{
  border-right: 1px;
}
.padding-0{
  padding: 0 !important;
   margin: 0 !important;
}

Answer 1

您可以使用media queries根据缩放或屏幕尺寸更改布局：

i.e @media screen and (min-width:400px)

等于100％变焦时400px的屏幕宽度或200％变焦时的800px。

请参阅https://stackoverflow.com/a/22247258/3163075

在所有浏览器中放大或缩小时，网站布局“分开”

1 个答案: