html - 在所有浏览器中放大或缩小时的网站布局 “breaks apart”

Question

如果我在 google chrome 中缩小/放大我的网站 (ctrl -/+)，那么我会注意到我的网站布局开始“ split ”，因为我的所有 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% 缩放时屏幕宽度为 400 像素或 200% 缩放时为 800 像素。

引用https://stackoverflow.com/a/22247258/3163075