如何减小整个“正文”桌面屏幕的字体大小？答案

【问题标题】：How do I decrease font size for desktop screens for the whole 'body'?如何减小整个“正文”桌面屏幕的字体大小？
【发布时间】：2017-04-23 15:58:03
【问题描述】：

我只是在构建我的第一个网站，最烦人的事情是将其设置为在移动设备和桌面设备上都很好看。

如果我先在手机上做，桌面上的字体太大，如果我相反，手机上的字体太小。如果您知道我的意思，它是响应式的，但响应不够“足够”。

我想先让它在移动设备上运行，然后进行设置，使其在桌面上的字体大小减少 50%。我尝试了以下方法，但没有成功：

@media (min-width: 1200px) {
body {
        font-size: 50% !important;
}
}

我知道我可以对每个 div 使用 @media，但是我不喜欢这样得到的结果。

注意：我使用 'vw' 作为尺寸单位。

我希望有一个 hack。谢谢！

后期编辑：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>Voyage Sala de Nunti</title>
    <meta name="description" content="Sala de Nunti Voyage">

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">





<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">




<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/5b698ffddd.js"></script>


<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/animate(1).css">


<style type="text/css">



@media only screen and (min-width: 970px) {
body {
        font-size: 10px !important;
}
}

body, html {
    height: 100%;
    overflow: auto;
    padding-top: 1.18em;

}



.head-div {
  padding-top: 30px;
  padding-bottom: 30px;

}

  .head-div h1,
.head-div .h1 {
    color: #937b9d;
}
.head-div p {
  /*margin-bottom: 0.1em;*/
  font-size: 4vw;

  color: white;
  /*font-family: 'Playfair Display';*/
    letter-spacing: 0.4em;
    padding-bottom: -1em !important;

}
.head-div > hr {
  border-top-color: #d5d5d5;
}

.head-div {
  max-width: 100%;
}
@media screen  {
  .head-div {
    padding-top: 5em;
    padding-bottom: 8em;
  }



  .head-div h1,
  .head-div .h1 {
    font-size: 6vw;
    color: white;

    letter-spacing: 0.4em;
    padding-bottom: 1em;
    /*text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;*/
  }

  .head-div {
    background: url(img/sala-de-nunti-head2.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height:100%;
}








.head-div1 {
  padding-top: 60px;
  padding-bottom: 30px;

}

  .head-div1 h1,
.head-div1 .h1 {
    color: #937b9d;
}
.head-div1 p {
  margin-bottom: 0.1em;
  font-size: 4vw;

  color: white;
  /*font-family: 'Playfair Display';*/
    letter-spacing: 0.4em;
    padding-bottom: -1em !important;

}
.head-div1 > hr {
  border-top-color: #d5d5d5;
}

.head-div1 {
  max-width: 100%;
}
@media screen  {
  .head-div1 {
    padding-top: 8em;
    padding-bottom: 6em;
  }



  .head-div1 h1,
  .head-div1 .h1 {
    font-size: 6vw;
    color: white;

    letter-spacing: 0.4em;
    padding-bottom: 1em;
    /*text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;*/
  }

  .head-div-img-1 {
    background: url(img/sala-de-nunti-head2.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height:100%;
}

  .head-div-img-2 {
    background: url(img/sala-de-nunti-1.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height:100%;
}









.btn-transparent {
    background: transparent; 
    border: 2px solid white;
    color: white;

    letter-spacing: 0.1em;
}

.btn-white {
    background: white; 
    border: 2px solid white;
    color: #937b98;
    font-weight: 250;
    letter-spacing: 0.1em;
}


.description {
    background-color: #937b98;
    color: white;

}

.large {
    padding-top: 3.5em;
    padding-bottom: 3em;




}

h1.large {

    color: white;

    font-size: 4vw;
    letter-spacing: 0.1em;
}




@media (min-width: 1200px) {
.present {

    color: white;
    font-weight: 100 !important;
    font-size: 4vw;
    letter-spacing: 0.1em;
    padding-top: 4vw;
    padding-bottom: 4vw;
    }
}

@media (max-width: 1000px) {
.md-sc {
    color: white;

    font-size: 4vw;
    letter-spacing: 0.1em;
}

}
.large-white {
    padding-top: 3.5em;
    padding-bottom: 3em;

    padding-right: 2em;

}

#title {
    color: #937b98;

    font-size: 4vw;
    letter-spacing: 0.1em;
    font-family: 'Playfair Display';
}

#text {
    color: #937b98;

    font-size: 4vw;
    letter-spacing: 0.1em;
    color: #000;

}


h1#title {
    padding-bottom: 1vw;
}

.icon-service {
    color: #937b98;

    font-size: 3vw;
    letter-spacing: 0.1em;
    color: #000;


}


.white-header {

    padding-top: 1.5em;
    padding-bottom: 1em;
}

.white-text{

    font-size: 2vw;
    color: #937b98;
}

.icon-padding {
    padding: 1em;

}

/*CAROUSEL*/

.pad-bot {
    padding-bottom: 1em;
}

.padd-bott {
    padding-bottom: 4em;
}

.contact {
    padding-top: 2em;
    padding-bottom: 2em;
    background-color: #F7F7F7;

    color: grey;

}

.padd-top

{
    padding-top: 11em;
}
#outer::before, #outer::after {
    display: block;
    content: "";
    height: 10%;
}
#inner {
    height: 80%;
    margin-left: 10%;
    margin-right: 10%;
}



@media (min-width: 1200px) {
 .margin-correct {
        margin-left: -7em;
}
}

.text-center {
  text-align: center;
}

@media (max-width: 900px) {
.large-div {
    height: 10em;
}
}

.serv {
    font-size: 9vw;
    line-height: 3.5vw;
}


.vertical-allign-middle {
     vertical-align: middle !important;
     padding-top: 40%;
}


.text {
    font-size: 4vw;
}

.light-weight {
    font-weight: 100 !important;
}


</style>



</head>



















<body>

    <!-- Navbar -->

    <nav class="navbar navbar-default navbar-fixed-top  my-own-style" id="my-navbar">

        <div class="container">

            <div class="navbar-header">


                <a href="#" class="navbar-brand" style="font-size: 3vw;">Voyage</a>
            </div>

        </div> 

</nav> 

<br> 




<div class="head-div1 head-div-img-1 padd-top pad-bot vertical-allign-middle">
        <!-- <div class="container text-center vertical-align-middle">

            <p style="font-weight: 200">sala de nunti</p>
            <h1 style="font-weight: 200">VOYAGE</h1>


            <button type="button" class="btn  btn-lg btn-white">
             Informatii la 069137950
            </button> -->


        </div>

</div>


<div class="container-fluid description">
    <div class="container large present text-center"><p style="font-size: 4vw">Voyage este un restaurant destinat exclusiv nuntilor, care ofera, pe langa locatia rafinata si festinul culinar, tot ce aveti nevoie pentru un eveniment unic.<p></div>
</div>


<!-- triple div 1 -->


<div class="container-fluid text-center">
    <div class="container large-white">
    <h1 id="title" style="font-size: 6vw;">Vrei o atmosferă elegantă și festivă?
</h1>
    <p id="text">Voyage este locul în care atitudinea se intersectează cu aptitudinea, în care organizarea întâlnește perfecțiunea, iar flexibilitatea generează satisfacția.<p></div>
</div>





<div id="myCarousel" class="carousel" data-ride="carousel">

    <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>


    </ol>


    <div class="carousel-inner">
        <div class="item active">
            <img src="img/slider/sala-de-nunti-slider-1.png" alt="saladenunti" class="img-responsive">
        </div>
        <div class="item">
            <img src="img/slider/sala-de-nunti-slider-2.png" alt="saladenunti" class="img-responsive">
        </div>
        <div class="item">
            <img src="img/slider/sala-de-nunti-slider-3.png" alt="saladenunti" class="img-responsive">
        </div>

    </div>




</div>



<!-- triple div 2 -->



<div class="container-fluid text-center">
    <div class="container large-white">
    <h1 id="title" style="font-size: 6vw;">Vrei o masă bogată, cu cele mai gustoase preparate?
</h1>
    <p id="text">Voyage rămâne restaurantul cu cele mai gustoase preparate de nuntă, care menține și prețurile "pământești". Prestigiul pe care l-am castigat de-a lungul anilor ne obligă să menținem întotdeauna cele mai ridicate standarde în tot ceea ce facem, cuvântul nostru de ordine fiind “calitate”, atât a preparatelor cât și a serviciilor și respectarea promisiunii făcute!<p></div>
</div>





<div id="myCarousel" class="carousel" data-ride="carousel">

    <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>


    </ol>


    <div class="carousel-inner">
        <div class="item active">
            <img src="img/slider/sala-de-nunti-slider-4.png" alt="saladenunti" class="img-responsive">
        </div>
        <div class="item">
            <img src="img/slider/sala-de-nunti-slider-5.png" alt="saladenunti" class="img-responsive">
        </div>
        <div class="item">
            <img src="img/slider/sala-de-nunti-slider-6.png" alt="saladenunti" class="img-responsive">
        </div>

    </div>




</div>


<!-- triple div 3 -->



<div class="container-fluid text-center">
    <div class="container large-white">
    <h1 id="title" style="font-size: 6vw;">Vrei să-ți oficiezi înscrierea în sânul naturii?
</h1>
    <p id="text">Aici orice eveniment ia amploarea unuia de poveste! Pe lângă meniul bogat și variat, aveți posibilitatea oficerii căsătoriei civile în grădina privată cu arcă special decorată în acest scop. Iar oaspeții dornici de relaxare se pot delecta sub adierea sălciilor la terasele discret amplasate.<p></div>
</div>





<div id="myCarousel" class="carousel" data-ride="carousel">

    <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>


    </ol>


    <div class="carousel-inner pad-bot large-div">
        <div class="item active">
            <img src="img/slider/sala-de-nunti-slider-7.png" alt="saladenunti" class="img-responsive">
        </div>
        <div class="item">
            <img src="img/slider/sala-de-nunti-slider-8.png" alt="saladenunti" class="img-responsive">
        </div>
        <div class="item">
            <img src="img/slider/sala-de-nunti-slider-9.png" alt="saladenunti" class="img-responsive">
        </div>

    </div>




</div>




<!-- 

<div class="container-fluid text-center description padd-bott">


    <div class="container large"><p>Te asteptam la Voayge. Capacitatea restaurantului este de 190 de persoane, iar prețul unui meniu mediu - 700 de lei<p></div>

    <button type="button" class="btn  btn-lg btn-transparent">
             Informatii la 069137950
            </button>
</div>

 -->








<div class="container-fluid text-center ">
    <div class="container"><h1 class="white-header light-weight" style="font-size: 6vw">În 2018 Voyage vă oferă gratuit<h1></div>


        <div class="row serv">

            <div class="col-md-4 icon-service icon-padding"><span class="white-text"><p style="font-size: 4vw"><i class="fa fa-pagelines" aria-hidden="true"></i><br>Accesorii decorative</p></span></div>
            <div class="col-md-4 icon-service icon-padding"><span class="white-text"><p style="font-size: 4vw"><i class="fa fa-wifi" aria-hidden="true"></i><br>WiFi internet</p></span></div>
            <div class="col-md-4 icon-service icon-padding"><span class="white-text"><span class="white-text"><p style="font-size: 4vw"><i class="fa fa-female" aria-hidden="true"></i><br>Camera pentru mireasă</p></span></div>
            <div class="col-md-4 icon-service icon-padding"><span class="white-text"><span class="white-text"><p style="font-size: 4vw"><i class="fa fa-heart" aria-hidden="true"></i><br>Terasă pentru ceremonia civilă</p></span></div>
            <div class="col-md-4 icon-service icon-padding"><span class="white-text"><p style="font-size: 4vw"><i class="fa fa-handshake-o" aria-hidden="true"></i><br>Insulă pentru întâmpinarea oaspeților</p></span></div>
            <div class="col-md-4 icon-service icon-padding"><span class="white-text"><p style="font-size: 4vw"><i class="fa fa-book" aria-hidden="true"></i><br>"Cartea Nunții Perfecte" Mindy Weiss</p></span></div>
            <div class="col-md-12 icon-service icon-padding"><span class="white-text"><p style="font-size: 4vw"><i class="fa fa-car" aria-hidden="true"></i><br>Parcare supravegheată</p></span></div>

        </div>
    </div>

</div>

<div class="container-fluid text-center pad-bot">
    <div class="container"><h1 class="white-header light-weight" style="font-size: 6vw">Cadoul restaurantului de la 150 de invitati<h1></div>


        <div class="row">

            <div class="col-sm-6 icon-service icon-padding"><span class="white-text"><p style="font-size: 4vw"><i class="fa fa-coffee" aria-hidden="true"></i><br>Consum nelimitat ceai si cafea naturala</p></span></div>
            <div class="col-sm-6 icon-service icon-padding"><span class="white-text"><p style="font-size: 4vw"><i class="fa fa-cutlery" aria-hidden="true"></i><br>Meniu pentru echipa artistica</p></span></div>


        </div>
    </div>

</div>

<div class="container-fluid description">
    <div class="container large present text-center"><p style="font-size: 4vw">Capacitatea sălii acoperă evenimente de diverse dimensiuni, de la 80 pana la 190 de invitați. Acordăm atenţie fiecărui detaliu, astfel încât ziua nunții să se desfăşoare întocmai precum îți imaginezi. Trăiește și tu experiența Voyage!<p></div>
</div>



<div class="head-div1 head-div-img-2 padd-top pad-bot">
        <div class="container text-center">


        </div>

</div>






<div class="contacts container-fluid contact">

        <div class="row">

             <div class="col-sm-3"><p style="font-size: 1.5vw"><a href="https://www.facebook.com/Voyage-Sala-de-Nunti-157967211008964/" target="_blank"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>Pagina noastra de Facebook</p></div>
             <div class="col-sm-3"><p style="font-size: 1.5vw"><i class="fa fa-phone fa-2x" aria-hidden="true"></i>Telefon: 0 691 37 950</p></div>
            <div class="col-sm-3"><p style="font-size: 1.5vw"><i class="fa fa-map-marker fa-2x" aria-hidden="true"></i>Sos. Chisinau-Hances. km10</p></div>
            <div class="col-sm-3"><p style="font-size: 1.5vw"><a href="https://www.google.com/maps/place/Voyage/@46.9595993,28.749311,15z/data=!4m2!3m1!1s0x0:0xd4545e11fc7d2e95?sa=X&ved=0ahUKEwilx9KomLrTAhWqNJoKHcMkAC8Q_BIIkAEwDg" target="_blank"><i class="fa fa-location-arrow fa-2x" aria-hidden="true" ></i></a>Pe Google Maps</p></div>



        </div>

</div>


<script src="https://code.jquery.com/jquery-3.2.1.min.js
"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>




</body>
</html>

解决方案：

因此，虽然我没有找到一个技巧，可以将移动版的所有字体在桌面版上神奇地减少 50%，但我确实将文本分成了 4 个类别（“特大号、大号、中号、小号') 并为它们中的每一个指定了两个屏幕尺寸（小于 1000 像素和大于 1001）的各自的“字体大小”。

看起来像这样：

@media only screen and (max-width:1001px){

.extra-large {
        font-size: 6vw !important;
}

}

@media only screen and (min-width:1000px){

.extra-large {
        font-size: 3vw !important;
}

}

【问题讨论】：

最小宽度为 768px
谢谢你，我做到了，一切都保持不变。
您是否尝试将字体大小增加到 50% 以上？
我希望这 50% 会变成原始尺寸的 50%（用于移动设备的尺寸）。我可以看到情况并非如此。
您缺少视口元标记。没有视口标签，媒体查询不起作用。

标签： html css twitter-bootstrap mobile fonts

【解决方案1】：

只需看一下 bootstrap 中的grid system。如果您以桌面为目标，则最小宽度应为 970px (col-md-)。

@media only screen and (min-width: 970px) {
body {
        font-size: 50% !important;
}
}

最好使用其他单位而不是 % 值作为字体大小

【讨论】：

谢谢，但它不起作用。我想有些东西会覆盖它。我认为我应该从代码中删除所有与字体大小相关的“！重要”标签，但它仍然不起作用。我把代码贴上去，也许有人能看到我看不到的东西。
如果您的代码仍然无法正常工作，请检查样式表层次结构。在引导后包含样式表。

【解决方案2】：

@media only screen and (max-width:1000px){

body {
        font-size: 20px !important;
}

}

@media only screen and (min-width:1001px){

body {
        font-size: 40px !important;
}

}

可能某些 DIV 的设置被其他 CSS 设置覆盖，所以如果它不起作用，请添加此设置（在媒体屏幕标签中）。

body, #somediv {
        font-size: 40px !important;
}

你也可以试试引导代码：

https://v4-alpha.getbootstrap.com/content/typography/#responsive-typography

【讨论】：

比你，我试试
Boostrap 代码应该是理想的选择，但有些手机的像素密度很高。我的是 1440 像素，大型设备的最小宽度设置为 1200 像素。去图
您建议的代码运行良好，谢谢。我必须将它应用到每个 div 但没关系
@AnastasiaIonas 很好用。你会把我的答案标记为正确吗？对我也有帮助:)