如何减小整个"正文"桌面屏幕的字体大小？

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

如果我首先进行移动操作，则字体在桌面上太大，如果我相反，则字体在移动设备上太小。如果您知道我的意思，它反应迅速，但响应迅速。

我想先将其保持移动并进行设置，以便在桌面上将字体尺寸降低50％。我尝试了以下内容，但无效：

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

我知道我可以在每个DIV中使用@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>

解决方案：

因此，虽然我没有找到黑客在桌面上神奇地将所有字体从移动版中降低50％'(，对于每个屏幕尺寸，我指定了各自的"字体大小"(小于1000px，大于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;
}
}

只需查看bootstrap中的网格系统。如果您针对桌面，最小宽度应为970px(col-md-(。

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

使用其他单元而不是字体尺寸的％值

是更好的做法

@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;
}

您也可以尝试Bootstrap代码：

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

相关内容

最新更新

热门标签：