所以基本上我正在处理代码的可调整部分，所有的事情都与我的媒体查询和其他一切顺利进行，突然它停止了工作(？我不知道出了什么问题，也不知道为什么现在会发生，我猜我的css中有一些错误看不到，但我找不到。
*{
margin: 0;
padding: 0;
box-sizing: border-box;
max-height: 2080px;
}
body{background-image: url(../img/aaa.png);
background-repeat: no-repeat;
background-size: contain;
z-index: 2;
max-height: 2080px;
background-color:pink;
}
footer{ background: #111;
left: 0; bottom: 0;
display: flex;
flex-wrap: wrap;
z-index: 2;
clear: both;
position: absolute;
width: 98%;
height: 10%;
margin-bottom: -100%;
margin-left: 1%;
margin-right: 1%;
display: flex;
align-items: center;
}
footer a{
color: white;
text-decoration: none;
font-family:monospace;
padding-left: 8%;
padding: 5px 14px;
}
.todo{ display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.fondo{
background: #FFF;
height: 2512px;
width: 98%;
margin-left: 1%;
margin-right: 1%;
margin-top: -23%;
z-index: 1;
}
.nombre h1{
margin-top: -38%;
font-family: cursive;
margin-left: 1%;
color: white;
font-size: 230%;
text-shadow: 5px 4px lightblue;
z-index: 2;
}
.menu{
background: #fff;
height: 60px;
width: 100vw;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 0 10px rgba(0,0,0, .5);
}
.logo{
color: pink;
font-family: "Comic Sans Ms", cursive;
font-weight: bold;
font-size: 240%;
margin-left: 2%;
text-shadow: 2px 3px lightblue;
}
.items{
display: flex;
list-style: none;
margin-right: 6%;
}
.items li{
border-radius: 1%;
margin: 0 16px;
}
.items li a{
text-decoration: none;
font-size: 110%;
display: block;
color: lightblue;
font-family: cursive;
}
li a:hover{
background-color:lightcyan;
padding: 5px;
transition: .4s;
}
.bts-menu{
margin-right: 10%;
font-size: 150%;
color: pink;
cursor:pointer;
display: none;
}
ul.show{
top: 65px;
}
.img-frontal {
margin-top: 10%;
margin-left: 18%;
z-index: 2;
max-width: 100%;
width: 60%;
}
.img-frontal h1{
position: absolute;
font-family:"Comic Sans Ms", cursive;
font-size: 590%;
color: white;
margin-left: 14%;
margin-top: -27%;
z-index: 2;
}
.img-frontal p{
position: absolute;
color: black;
z-index: 2;
margin-left: 20%;
font-family: "Comic Sans ms", cursive;
color: white;
margin-top: -25%;
font-size: 223%
}
.front{
max-width: 80%;
margin-left: 15%;
margin-top: 10%;
}
.back-content h1{
margin: auto;
margin-left: 15%;
font-family: cursive;
margin-top: 34%;
position: absolute;
font-size: 690%;
color: pink;
letter-spacing:20px;
text-shadow: 5px 4px lightblue;
}
.back-content img{
margin: auto;
width: 50%;
height: 30%;
margin-top: 50%;
margin-left: 3%;
border-style:dashed;
border-color: pink;
}
hr.someClass {
background-color: lightblue;
width: 70%;
height: 5px;
position: absolute;
margin-top: 43%;
margin-left: 2%;
z-index: 2;
}
.text1 h1{
color:lightblue;
z-index: 2;
margin-top: -34%;
margin-left: 58%;
font-size: 450%;
font-family: "Comic Sans Ms", cursive;
text-shadow: 5px 4px pink;
}
.text1 p{
color:black;
z-index: 2;
margin-left: 55%;
font-size: 150%;
}
.bubbly-button{
font-family: 'Helvetica', 'Arial', sans-serif;
display: inline-block;
font-size: 0.6em;
padding: 1em 2em;
margin-top: 2%;
margin-bottom: 60px;
appearance: none;
border-radius: 4px;
border: none;
background-color: deeppink;
color: white;
cursor: pointer;
position: absolute;
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5)
}
.cajas{
max-width: 1100px;
margin: 0 auto;
text-align: center;
padding: 43px;
margin-top: 13%;
}
.cajas h1{
font-size: 120%;
margin: 0 0 26px 0;
letter-spacing: 1px;
}
.contenido1{
display: flex;
flex-wrap: wrap;
flex: 1;
margin: 16px;
padding: 33px;
border: 3% solid black;
border-radius: 4px;
transition: all .3s ease;
}
.otros{
display: flex;
align-items: center;
}
.card-1, .card-2{
margin-right: 1%;
}
.card-1, .card-2, .card-3 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.card-2:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.card-3:hover {box-shadow: 0 14px 28px
rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.button2{
font-family: 'Helvetica', 'Arial', sans-serif;
display: inline-block;
font-size: 0.6em;
margin-left: -2%;
padding: 2em 3em;
border-style: dashed;
appearance: none;
border-radius: 4px;
border: none;
background-color: deeppink;
color: white;
cursor: pointer;
position: absolute;
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5)}
正如我所说，它在媒体上运行得很好，但事实并非如此，代码有点长，所以是的
@media screen and (max-width:952px){
.logo{
font-size: 170%;
padding-left: 5%;
}
.items{
font-size: 80%;
}
.img-frontal p{
font-size: 110%;
top: 60%;
}
.img-frontal h1{
font-size: 310%;
top: 63%;
}
.back-content h1{
font-size: 500%;
margin-top: 30%;
}
.text1 h1{
font-size: 320%;
margin-top: -36%
}
.text1 p{
font-size: 80%;
}
.fondo{
height:1485px;
}
.cartas{
width: 30%;
height: 10%;
margin-left:1%;
margin-right: 2%;
position: relative;
flex-direction: row;
}
footer{
margin-bottom: -105%;
}
}
@media screen and (max-width:858px){
.menu{
height:65px;
}
.bts-menu
{
display: inline-flex;
}
.items
{
position: fixed;
width: 100vw;
height: calc(100%-65px);
background: darkgray;
top: -100vh;
text-align: center;
transition: all .4s;
flex-direction: column;
}
.item li
{
margin: 30px 0 0;
line-height: 30px;
}
.items li a
{
font-size: 190%;
color: #fff;
font-weight: bold;
}
.img-frontal p{
font-size: 100%;
top: 60%;
}
.img-frontal h1{
font-size: 290%;
top: 60%;
}
.back-content h1{
font-size: 430%;
margin-top: 30%;
}
.text1 h1{
font-size: 280%;
margin-top: -36%
}
.text1 p{
font-size: 77%;
}
.cartas{
width: 30%;
height: 10%;
margin-left:1%;
margin-right: 2%;
position: relative;
flex-direction: row;
}
.fondo{
height:1385px;
}
.contenido1 h3{
font-size: 85%;
}
.button2{
margin-left: -6%;
}
}
@media screen and (max-width:858px) and (orientation:landscape){
.items li{
margin: 5px 0 0;
}
.items {
overflow: scroll;
height: calc(100%-65px);
}
}
@media screen and (max-width:858px){
.img-frontal p{
font-size: 80%;
top: 44%;
}
.img-frontal h1{
font-size: 230%;
top: 47%;
}
.back-content h1{
font-size: 370%;
margin-top: 30%;
}
.text1 h1{
font-size: 230%;
margin-top: -36%;
margin-top: -35%;
}
.text1 p{
font-size: 68%;
margin-top: -3%;
}
.contenido1{
padding: 15%;
}
.fondo{
height:1185px;
}
.contenido1 h3{
font-size: 70%;
}
.button2{
margin-left: -6%;
}
footer{
margin-bottom: -99%;
}
}
@media screen and (max-width:964px){
.img-frontal p{
font-size: 85%;
top: 92%;
}
.img-frontal h1{
font-size: 248%;
top: 91.5%;
}
.back-content h1{
font-size: 420%;
margin-top: 32%;
}
.text1 h1{
font-size: 260%;
margin-top: -33%;
}
.text1 p{
font-size: 80%;
margin-top: -1%;
}
.contenido1{
padding: 15%;
}
.fondo{
height:1294px;
}
.contenido1 h3{
font-size: 70%;
}
.button2{
margin-left: -6%;
}
footer{
margin-bottom: -110%;
}
}
@media screen and (max-width:964px){
.img-frontal p{
font-size: 50%;
top: 92%;
}
.img-frontal h1{
font-size: 248%;
top: 91%;
}
.back-content h1{
font-size: 400%;
margin-top: 32%;
}
.text1 h1{
font-size: 230%;
margin-top: -33%;
}
.text1 p{
font-size: 40%;
margin-top: -1%;
}
.contenido1{
padding: 15%;
}
.fondo{
height:1294px;
}
.contenido1 h3{
font-size: 70%;
}
.button2{
margin-left: -6%;
}
footer{
margin-bottom: -110%;
}
}
媒体查询风格中的一个明确问题是：
.items {
…
height: calc(100%-65px);
}
当使用calc时，您需要在运算符周围放置一个空格，或者CSS无效：
.items {
…
height: calc(100% - 65px);
}