/* page positions */
*{
box-sizing: border-box;
}
#mainBody{
position: fixed;
top: 46px;
left: 0px;
}
.center{
position: fixed;
left: 0;
top: 75%;
width: 100%;
text-align: center;
}
#about{
position: fixed;
top: 50px;
bottom: 10px;
left: 10px;
right: 10px;
overflow: scroll;
}
/* fonts */
@font-face{
font-family: Wellone;
src: url("fonts/Fonts/Wellone/Wellone.otf") format("opentype");
}
@font-face{
font-family: Brush;
src: url("fonts/Fonts/ufonts.com_brush-script-mt.ttf") format("truetype");
}
@font-face{
font-family: Barkless;
src: url("fonts/Fonts/Barkless/Barkless.otf") format("opentype");
}
@font-face{
font-family: Anter;
src: url("fonts/Fonts/Anter/Anter.otf") format("opentype");
}
@font-face{
font-family: Naive;
src: url("fonts/Fonts/Naive/Naive.otf") format("opentype");
}
/* lists */
.navlist{
position: fixed;
white-space: nowrap;
float: none;
top: 0px;
left: 0px;
right: 0px;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
}
.navlist li{
display: inline-block;
}
.navlist li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navlist li a:hover {
background-color: #111;
}
.desclist{
font-family:"Times New Roman";
font-size: 200%;
color: black;
}
.desclist li{
list-style-type: circle;
}
/* background pictures, slideshows */
.headerimg{
position: fixed;
top: 46px;
left: 0px;
opacity: .5;
width: 100vw;
height: 100vh;
}
.headerimg2
{
position: fixed;
top: 46px;
left: 0px;
right: 0px;
width: 100vw;
height: 100vh;
}
.slideshow{
position: fixed;
top: 387px;
left: 750px;
transform: translate(-50%, -50%);
}
.mySlides{
display: none;
animation: fade 6s;
/*top: 50%;
left: 50%;
transform: translate(-50%, -50%);*/
}
/* Fading animation */
@keyframes fade {
0% {opacity: 0;}
16.66%{opacity: 1;}
33.32% {opacity: 1;}
49.98% {opacity: 1;}
100% {opacity: 0;}
}
/* word content */
/* Anter, Naive */
p.title{
position: fixed;
font-family: "Bodoni MT";
top: -30px;
font-size: 400%;
color: white;
}
p.title2{
position: fixed;
font-family: Brush;
font-size: 400%;
top: 15px;
color: white;
}
p.desc{
font-family: Barkless;
font-size: 200%;
color: blanchedalmond;
}
p.words{
position: relative;
font-family: "Times New Roman";
text-indent: 2.0em;
font-size: 200%;
color: black;
font-weight: bold;
clear: left;
}
@media only screen and (min-width: 376px){
#mainBody{
display: none;
}
}<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="wedding, wedding meadows, country wedding, rustic wedding, wedding venue, outdoor wedding, beautiful wedding, spokane wedding, cheney wedding, rustic meadows">
<meta name="DC.title" content="Rustic Meadows">
<meta name="description" content="Plan your perfect wedding at our beautiful country home, with gorgeous views, ample space, a rustic old-timey feel, and a caring family-run staff.">
<meta name="robots" content="index,follow">
<title>Rustic Meadows</title>
<link rel="stylesheet" href="help.css" type="text/css"/>
</head>
<body>
<div id="mainBody">
<nav>
<ul class="navlist">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="package.html">Wedding Packages</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="reviews.html">Reviews</a></li>
<li><a href="pictures.html">Gallery</a><li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
<img class="headerimg2" alt="rustic meadows website background" src="Pictures\RusticMeadowsWeddingBackground.png"/>
<p class="title">Rustic</p>
<p class="title2">Meadows</p>
<div class="slideshow">
<img class="mySlides fade" alt="rustic meadows wedding bride and groom" src="Pictures\RusticMeadowsBrideGroom.jpg"/>
<img class="mySlides fade" alt="rustic meadows ceremony area" src="Pictures\RusticMeadowsCeremony.jpg"/>
<img class="mySlides fade" alt="rustic meadows reception area" src="Pictures\RusticMeadowsReception.jpg"/>
<img class="mySlides fade" alt="rustic meadows wedding first kiss" src="Pictures\RusticMeadowsKiss.jpg"/>
<img class="mySlides fade" alt="rustic meadows bride and groom chairs" src="Pictures\RusticMeadowsMrMrs.jpg"/>
<img class="mySlides fade" alt="rustic meadows night lights" src="Pictures\RusticMeadowsLights.jpg"/>
<img class="mySlides fade" alt="rustic meadows welcome sign" src="Pictures\RusticMeadowsSign.jpg"/>
<img class="mySlides fade" alt="rustic meadows table setup" src="Pictures\RusticMeadowsTable.jpg"/>
<img class="mySlides fade" alt="rustic meadows walkway to ceremony" src="Pictures\RusticMeadowsWalkway.jpg"/>
<img class="mySlides fade" alt="rustic meadows wagon wheel decoration" src="Pictures\RusticMeadowsWheel.jpg"/>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 6000);
}
</script>
</div>
</body>
</html>
因此，我已经阅读了本网站上的许多文章。我的HTML文件中有适当的标记，并且CSS文件的末尾有@media查询。事实是，媒体查询可在移动Firefox应用程序（iPhone 6）中运行，在我测试过的桌面浏览器中运行，但不适用于移动浏览器和移动Chrome应用程序。我觉得这个问题与野生动物园和chrome移动应用有关，但我可能错了，只是在代码中遗漏了一些不幸。任何帮助都是有意义的，因为我已经研究了几天，但没有找到好的解决方案。
谢谢！
答案 0 :(得分：0)
将媒体属性添加到<link rel="stylesheet" href="help.css" type="text/css"/>。
就像：
<link rel="stylesheet" media="screen and (min-width: 376px)" href="help.css" type="text/css" />
答案 1 :(得分：0)
所以我实际上发现我正在处理浏览器的捕获功能。而不是我的@media查询有问题。奇怪的是Firefox立即加载了新的Web内容。在使用chrome和safari时，我必须每次都手动清除缓存和cookie，以查看我在网络服务器上所做的更改。
编辑-Jason bamber发布的修复程序
进行更改时，可以通过将查询字符串附加到CSS <link rel="stylesheet" href="help.css?v=10" type="text/css"/>进行更改时轻松地破坏浏览器缓存，