Html 如何在整个'；主体'；？
我只是建立了我的第一个网站之一，最烦人的事情是设置它看起来很好，在移动和桌面上 如果我先用手机，桌面上的字体太大；如果我用手机，桌面上的字体太小。如果你知道我的意思的话，它是有响应的，但响应“不够” 我想让它移动第一，并设置它，使其减少50%的字体大小在桌面上。我尝试了以下方法，但无效：Html 如何在整个'；主体'；？,html,css,twitter-bootstrap,mobile,fonts,Html,Css,Twitter Bootstrap,Mobile,Fonts,我只是建立了我的第一个网站之一，最烦人的事情是设置它看起来很好，在移动和桌面上 如果我先用手机，桌面上的字体太大；如果我用手机，桌面上的字体太小。如果你知道我的意思的话，它是有响应的，但响应“不够” 我想让它移动第一，并设置它，使其减少50%的字体大小在桌面上。我尝试了以下方法，但无效： @media (min-width: 1200px) { body { font-size: 50% !important; } } 我知道我可以在每个div中使用@媒体，但是我不喜欢这样做的
@media (min-width: 1200px) {
body {
font-size: 50% !important;
}
}
@媒体使用其他单位而不是字体大小的%值将是更好的做法使最小宽度768px谢谢，我做到了，一切都保持不变。您是否尝试将字体大小增加到50%以上？我希望50%将使其成为原始大小的50%（移动设备）。我可以看出情况并非如此。您缺少视口元标记。如果没有视口标记，媒体查询将无法工作。谢谢，但它不起作用。我想是有什么东西压倒了它。我想我应该删除所有的'！“重要”标记与代码中的字体大小相关，但仍然不起作用。我将粘贴代码，也许有人可以看到我没有看到的东西。如果您的代码仍然无法正常工作，请检查样式表层次结构。在bootstrap之后包含样式表。与您相比，我会尝试bootstrap代码应该是理想的选择，但有些手机的像素密度很高。矿山为1440px，大型设备的最小宽度设置为1200px。去想想你建议的代码很好用，谢谢。我将不得不把它应用到每一个div，但那是ok@AnastasiaIonas很高兴它能工作。你能把我的回答记为正确吗？也会对我有帮助：）
<!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>
@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;
}
}
@media only screen and (max-width:1000px){
body {
font-size: 20px !important;
}
}
@media only screen and (min-width:1001px){
body {
font-size: 40px !important;
}
}
body, #somediv {
font-size: 40px !important;
}
@media only screen and (min-width: 970px) {
body {
font-size: 50% !important;
}
}