html - Bootstrap 放大更改我的文本的大小

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