如何爲整個「body」（引導程序）減少桌面屏幕的字體大小？

我只是建立我的第一個網站之一，最煩人的事情是設置它在移動和桌面上都很好看。如何爲整個「body」（引導程序）減少桌面屏幕的字體大小？

如果我首先使用移動設備，則桌面上的字體太大，如果我做的是相反的話，移動設備上的字體太小。如果你知道我的意思，那麼它是有迴應性的，但沒有足夠的反應。

我想先保持移動並將其設置爲使其在桌面上將字體縮小50％。我試過以下（沒有工作，可能是愚蠢的，但請與我裸）：

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

我知道我可以每格使用@media，但是我不喜歡我的結果與此相得益彰。

注意：我使用'vw'作爲大小單位。

我希望這是一個破解。謝謝！

後來編輯：

<!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>

SOLUTION：

因此，雖然我沒有找到一個黑客以神奇的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; 
} 

}

謝謝你們的幫助。

來源

2017-04-23 Anastasia Ionas

使最小寬度768px –

謝謝你，我知道了，一切保持不變。 –

你是否嘗試增加大於50％的字體大小？ –

@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

來源

2017-04-23 16:04:34 RzeIMz

比你，我會嘗試 –

Boostrap代碼應該走的路，理想情況下，但一些手機具有較高的像素密度。礦是1440px，大型設備的最小寬度設置爲1200px。去圖 –

你建議的代碼很好用，謝謝。我將不得不將它應用到每個div，但這沒關係 –

只要看看在bootstrap.If的grid system你的目標在桌面上，最小寬度應爲970像素（ COL-MD-）。

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

這將是更好的做法是使用其他單位而不是百分比值字體大小

來源

2017-04-23 16:05:25

謝謝，但它不起作用。我想有一個覆蓋它。我認爲我應該從代碼中刪除與字體大小相關的所有'！important'標記，但它仍然不起作用。我將粘貼代碼，也許有人可以看到我不知道的東西。 –

如果您的代碼仍然無法運行，請檢查樣式表層次結構。引導後包含樣式表。 –

如何爲整個「body」（引導程序）減少桌面屏幕的字體大小？

回答

相關問題