Question

放大时我的文字会发生变化，但缩小时会保持原位... 不确定这是否与Bootstrap本身有关，但这是我的代码：（Bootstrap 3.3.7）

/*Main*/
.section-padding{
    padding-top:100px;
    padding-bottom: 100px;
}
/*home*/
.home {
    height:100vh;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #2e8222;
    text-align:center;
    color:white;
}

.heading {
    font-size:52px;
}
/*home quote*/
.quote {

    font-size: 50px;
}
/*about*/
.about {

    height:120vh;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #ff8e15;
    text-align:center;
    color:white;


}
/*abouttext*/
.abouttext {

}
/*contact*/
.contact {

    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #2a7682;
    text-align:center;
    color:white;

}
/*prijzen*/
.pricing {

    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #822127;
    text-align:center;
    color:white;

}
.prijzen {


}

<!--Home-->
<section id="home" class="home">
    <div class="container">
            <h1 class="quote">Welcome.</h1>


    </div>
</section>

<!--Section 2 : OVer mij-->
<section id="about" class="about section-padding">
    <div class="container">
        <h1 class="heading">About</h1>
        <h1 class="abouttext" >
            Welcome to our website. We are offering a custom website just for you!
            We can use bootstrap, HTML, css and javascript for your custom website.
            Just send your design and we will make the website just how you like it!
            Just tell us what you want, or give us a design. We'll make it just how you like.
        </h1>
    </div>
</section>
<!--Section 3: services-->
<section  class="contact section-padding">
    <div class="container-fluid">
        <h1 class="heading">Our services</h1>

        <!--images gallery-->
        <br>
        <br>
        <br>
        <br>
        <br>
        <div class="row">
            <div class="col-sm-4">
                <div class="thumbnail">
                    <a href="#">
                        <img src="http://placehold.it/350x150">
                        <div class="caption">
                            <p>Website #1</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="thumbnail">
                    <a href="#">
                        <img src="http://placehold.it/350x150">
                        <div class="caption">
                            <p>Website #3</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="thumbnail">
                    <a href="#">
                        <img src="http://placehold.it/350x150">
                        <div class="caption">
                            <p>Website #3</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-md-12">
                <div class="container servicetext">
                    <br>
                    <h1>We offer a selected amount of pre-made templates, but we can also make your own personal website.
                        We can also upload your site to your webserver if you prefer that. It's all up to you.
                    </h1>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="pricing section-padding">
    <div class="container col-md-4">
        <div class="row">
            <h1 class="heading pricingtext"> Pricing</h1>
        </div>
        <div class="row prijzen">
            <h1 class="pricingtext"> the pricing depends on the website/template. contact us for the pricing.</h1>
        </div>

    </div>
</section>

我希望我的问题很明确，如果需要，请随时提出更多信息。

Answer 1

由于分辨率发生了变化，所以您可以采取的措施是添加@media css标记，您可以在其中设置元素大小...

例如

@media screen and (min-width: 480px) {
  .welcomeDiv {
      min-height: 1000px;
      margin-bottom: 50px;
  }
  .aboutDiv{
      min-height: 1000px;
      margin-top: 100px;
  }
}

这应该保持文本div分开。有关@media http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

的更多信息

Bootstrap放大会更改文字的大小

1 个答案: