我正在构建我的第一个网站之一，最烦人的事情是将其设置为在移动设备和桌面设备上都很好看。
如果我先移动它，那么桌面上的字体太大了，如果我反其道而行，那么字体在移动设备上太小了。如果你知道我的意思，那就是反应灵敏但没有“足够”的反应。
我想首先保持移动设置并进行设置，以便在桌面上将字体大小减少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>
SOLUTION：
因此，虽然我没有找到一个黑客，当它在桌面上时，从移动版本神奇地减少了50％的所有字体，我确实打破了4个类的文本（'超大，大，中，小'）并为每个人指定了两个屏幕尺寸（小于1000px且大于1001）的相应'font-size'。
它看起来像那样：
@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;
}
}
答案 0 :(得分：0)
@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
答案 1 :(得分：0)
只需查看bootstrap中的grid system。如果您的目标是桌面，则最小宽度应为970px（col-md - ）。
@media only screen and (min-width: 970px) {
body {
font-size: 50% !important;
}
}
最好使用其他单位而不是字体大小的％值