媒体查询不适用于移动断点
[英]Media query not working on mobile breakpoint
问题描述
我在一个学校项目的网站上工作，我有 2 个媒体查询断点从桌面级联到平板电脑，最后到移动设备。 我在991px处的平板电脑断点工作正常，但我在479px处的移动断点根本没有记录任何更改。 我真的不知道出了什么问题。
我尝试使用媒体查询为我的网站设置多个断点，希望它能立即运行。 结果表明，只有具有最高max-width值的媒体查询才有效。
任何帮助深表感谢。
这就是我编写媒体查询的方式：
@media only screen and (max-width: 991px) {}
@media only screen and (max-width: 479px) {}
如果需要，这是我为媒体查询编写的所有代码
@media only screen and (max-width: 991px) {
body {
width: 96%;
}
h2 {
font-family: 'salomeitalic';
font-weight: normal;
font-style: normal;
font-size: clamp(50px, 5.208vw, 100px);
padding: 0px;
margin: 0px;
line-height: 1.1;
color: #242325;
}
.p2 {
font-family: 'Satoshi-Variable';
font-weight: medium;
font-size: clamp(16px, 1.094vw, 21px);
color: #242325;
margin: 0;
}
.nav-front {
position: sticky;
right: auto;
top: auto;
bottom: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
height: 100%;
border-left: none;
padding: clamp(20px, 2.083vw, 40px);
}
.top-wrapper {
display: flex;
justify-content: space-between;
width: 100%;
}
.nav-links {
display: flex;
flex-direction: row;
background-color: #242325;
border-radius: 50px;
}
.nav-logo {
height: 70px;
width: auto;
margin-bottom: 0;
}
.nav-top {
display: none;
margin-bottom: 40px;
}
a {
font-family: 'Satoshi-Variable';
font-weight: medium;
font-size: clamp(18px, 1.302vw, 25px);
color: #FFF8F2;
margin-bottom: 0;
text-decoration: none;
background-color: #242325;
padding: 20px;
border-radius: 50px;
}
.contact-wrapper {
display: none;
}
header {
width: 100%;
height: 80vh;
}
.profile-img-wrapper {
width: 90%;
}
.about-wrapper {
width: 95%;
}
.scroll-button-wrapper {
display: flex;
justify-content: end;
width: 104%
}
main {
width: 100%;
}
.project-1 {
height: 455px;
}
.project-3 {
height: 455px;
}
.project-5 {
height: 455px;
}
.contact-div {
height: 435px;
}
.arrow-up-left {
margin-bottom: 17%;
}
}
@media (max-width: 479px) {
body {
background-color: aqua;
}
h2 {
font-family: 'salomeitalic';
font-weight: normal;
font-style: normal;
font-size: clamp(50px, 13.021vw, 250px);
padding: 0px;
margin: 0px;
line-height: 1.1;
color: #242325;
}
header {
display: flex;
flex-direction: column;
height: 100%
}
.header-left {
width: 100%;
height: 100vh;
}
}
<html lang="da" dir="ltr">
<head>
<meta charset="UTF-8">
<title>HTML CODE</title>
<link rel="stylesheet" href="projekt-3.css">
</head>
<body>
<nav class="nav-front">
<div class="top-wrapper">
<img class="nav-logo"
src="exports/logo.svg" alt="Staugaard Design Logo">
<div class="nav-links">
<div class="nav-top">
<p>navigation</p>
<img class="arrow-down" src="exports/arrow-down.svg">
</div>
<a href="projekt-3.html">om mig</a>
<a href="projekt-3.html">projekter</a>
<a href="projekt-3-kontakt.html">kontakt</a>
</div>
</div>
<div class="contact-wrapper">
<div class="margin-buttom">
<a href="https://www.instagram.com/staugaard_design/">instagram</a>
</div>
<p>©2022</p>
<a href="projekt-3-kontakt.html"><button>KONTAKT</button></a>
</div>
</nav>
<header>
<div class="header-left">
<div class="margin">
<h2>KREATIV DESIGNER & UDVIKLER</h2>
</div>
<div class="moving-text-wrapper">
<img class='orange-star' src="exports/star-orange.svg">
<p class="white">2022 PORTFOLIO</p>
<img class='orange-star' src="exports/star-orange.svg">
<p class="white">2022 PORTFOLIO</p>
<img class='orange-star' src="exports/star-orange.svg">
</div>
<div class="profile-img-wrapper">
</div>
</div>
<div class="header-right">
<div class="about-wrapper">
<img class="black-star" src="exports/star-2.svg">
<p>hej! mit navn er kristoffer. jeg er en freelance web designer samt web udvikler som bor i odense. Jeg skaber smukke hjemmesider i samarbejde med virksomheder og selvstændige som gerne vil skille sig ud fra konkurrenterne.</p>
</div>
<div class="scroll-button-wrapper">
<div class="scroll-button">
<img class="orange-arrow" src="exports/orange-arrow.svg">
</div>
</div>
</div>
</header>
<div class="transition">
<h1>UDVALGTE<br>PROJEKTER</h1>
</div>
<main>
<div class="main">
<div class="project-1">
<div class="project-text1">
<div class="margin-buttom">
<h2>classic curry</h2>
</div>
<p class="p2">restauranten classic curry er en klassisk indisk restaurant som laver autentiske retter. projekt gik ud på at vi skulle vælge en hjemmeside som vi synes manglede en kærlig hånd.</p>
</div>
<div class="project-visual">
<div class="img-wrapper">
<img class="project-img" src="exports/classic-img.png" alt="classic curry hjemmeside">
</div>
<img class="arrow-up-left" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
</div>
</div>
<div class="project-2">
<div class="project-text2">
<div class="margin-buttom">
<h2>gluds</h2>
</div>
<p class="p2">gluds café manglede en hjemmeside som kunne fremvise alt hvad caféen har at byde på, i et elegant design.</p>
</div>
<div class="project-visual">
<img class="arrow-up-right" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
<img class="project-img" src="exports/gluds-img.png" alt="gluds cafe hjemmeside">
</div>
</div>
</div>
<div class="main">
<div class="contact-div">
<img class="arrow-up-white" src="exports/arrow-up-white.svg">
<div class="contact-text">
<h3>kontakt<br>kontakt<br>kontakt</h3>
</div>
</div>
<div class="project-3">
<div class="project-text3">
<div class="margin-buttom">
<h2>justesen artpack</h2>
</div>
<p class="p2">virksomheden justesen artpack er et kunst transport- og vedligeholdelses firma. De havde brug for en mere advanceret hjemmeside og et mere moderne design, som de selv kunne opdatere med blog indlæg.</p>
</div>
<div class="project-visual">
<div class="img-wrapper">
<img class="project-img" src="exports/justesen-img.png" alt="justesen artpacks hjemmeside">
</div>
<img class="arrow-up-left2" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
</div>
</div>
</div>
<div class="main">
<div class="project-4">
<div class="project-text4">
<div class="margin-buttom">
<h2>m/k aps</h2>
</div>
<p class="p2">m/k service aps er et rengørings firma som manglede et nyere og moderne design, med mere funktionalitet.</p>
</div>
<div class="project-visual">
<img class="arrow-up-right" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
<img class="project-img" src="exports/mk-img.png" alt="mk serverice hjemmeside">
</div>
</div>
<div class="project-5">
<div class="project-text5">
<div class="margin-buttom">
<h2>by gitte lage</h2>
</div>
<p class="p2">wellness -by gitte lage er en virksomhed som tilbyder wellness behandlinger og massager. i et tæt samarbejde med ejeren hjalp jeg med at bygge virksomhedens online struktur fra bunden.</p>
</div>
<div class="project-visual">
<div class="img-wrapper">
<img class="project-img" src="exports/wellness-img.png" alt="mk serverice hjemmeside">
</div>
<img class="arrow-up-left" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
</div>
</div>
</div>
</main>
</body>
1 个解决方案
解决方案1
0
请尽量将手机屏幕媒体查询保持在平板媒体查询代码之上一次
移动设备上的媒体查询断点不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.