以下是移动设备的CSS
@media(max-device-width: 480px)
{html{font-size: 2px}
#Logo{line-height: 25px; position: absolute; top: 2%; left: 65%; text-align:centre; white-space: nowrap; font-size: 40px;
padding-bottom: 10px; display: inline-block; vertical-align: middle;}
#sub{ text-align: center; display:block; position: absolute; top: 45% ; left: 25%; font-size: 20px; font-family: Airstrike; padding-bottom:0px; color: whitesmoke}
#header{width: 250%}
#Welcome{font-size: 15px}
#main{font-size: 12px}
#GetPic{width: 5vw}
#ProducMax{display: inline-block; position: absolute; top: 90% ; left: 55%; font-size: 23px}
}}
@media (orientation: portrait) and (max-device-width: 480px)
{html{font-size: 2px}
#Logo{line-height: 25px; position: absolute; top: 2%; left: 75%; text-align:centre; white-space: nowrap; font-size: 30px;
padding-bottom: 10px; vertical-align: middle;}
#sub{ text-align: center; display:block; position: absolute; top: 50% ; left: 25%; font-size: 15px; font-family: Airstrike; padding-bottom:0px; color: whitesmoke}
#header{width: 260%}
#Welcome{font-size: 15px}
#main{ font-size: 12px}
#GetPic{width: 5vw}
#ProducMax{display: inline-block; position: absolute; top: 90% ; left: 55%; font-size: 23px}
}}
以下是Global和Tablet CSS文件
@font-face {font-family: 'Neutronium'; src: url('fonts/divlit.ttf');}
@font-face{font-family: 'Hemi'; src: url('fonts/hemi_head_bd_it.ttf')}
@font-face{font-family: 'Airstrike'; src: url('fonts/airstrike.ttf')}
@font-face{font-family: 'MantaRayJack'; src: url('fonts/VertigoFLF.ttf')}
html{margin: 0; padding: 0; font-size: 10px}
#header{background-color: #020249; line-height: 20px; display: block; color: whitesmoke; margin-bottom: 0px;}
#Logo{ line-height: 25px; text-align: right; position: absolute; top: 2%; left: 30%; white-space: nowrap;
font-size: 80px; font-family: Airstrike; padding-bottom: 15px; display: inline-block; vertical-align: middle;}
#sub{position: relative; top: 5%; text-align: center; font-size: 30px; font-family: Airstrike; padding-bottom:0px;}
body{margin: 0px; font-family: MantaRayJack; font-size: 1vw; background: url(images/Aluminium.jpg); background-size: cover; width: auto}
#Welcome{text-align: center; font-size: 2.5rem; font-family: Hemi; margin: 0px;}
#Services{text-align: center; display: block; padding-top: 0px}
#Defense{text-align: center; display: block; padding-top: 30px}
#Consult{text-align: center; display: block; padding-top: 30px}
#good{text-align: center; font-size: 2.3rem; font-family: Hemi; padding: 5px; color: whitesmoke}
#Hello{ font-size: 2rem; font-family: Hemi}
nav{background-color: #020249; float: left; margin-top: 0; padding: 10px; position: relative; top: 10%; margin-right: 10px}
#ProducMax{display: inline-block; position: absolute; top: 90% ; left: 30%; font-size: 28px}
}
@media(orientation: portrait) and (max-device-width: 1024px) and (min-device-width: 1000px)
{
#Logo{position: absolute; left: 20%; top: 2%; font-size: 75px; line-height: 15px}
#header{width: 110%}
#ProducMax{display: inline-block; position: absolute; top: 45% ; left: 37%; font-size: 28px}
}
@media(orientation: landscape) and (max-device-width: 1024px) and (min-device-width: 1000px)
{#header{width: 102%}
#Logo{position: absolute; left: 20%; top: 2%; font-size: 80px; line-height: 20px}
#ProducMax{display: inline-block; position: absolute; top: 70% ; left: 38%; font-size: 28px}
}
这是HTML
<html>
<head>
<title>MuGa Digital Solutions</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,">
<link rel="stylesheet" type="text/css" href="newcss.css">
<link rel="stylesheet" type="text/css" href="mobile.css" media="(max-device-width: 800px)">
</head>
<div id="header">
<div id="Photo"><img src="images/LogoD.jpg" style="width:16vw; vertical-align: middle; white-space: nowrap; display: block"></div><div id="Logo">MuGa Digital Solutions
<br><br><br> <div id="sub">A division of Mukherjee-Garg</div></div>
</div>
<body>
<br><br>
<nav>
<br><div id="good">Divisions</div>
<br><div id="Services"><a href="Services.html"><img src="images/Services.png" style="height: auto; width: 12rem"></a></div>
<div id="Consult"><a href="Consult.html"><img src="images/Digital_Consultancy.png" style="height: auto; width: 12rem"></a></div>
<div id="Defense"><a href="Defense.html"><img src="images/Untitled-1.png" style="height: auto; width: 12rem;"></a></div>
</nav>
<div id="Welcome">Welcome to the home of MuGa Digital Solutions,
a Non-Profit organization committed to providing easy-to-use software to enhance and enrich everyday lives</div>
<br><br>
<div id="main">
<div id="Hello">
<center><h1>Our Software</h1></center>
<br><center><h3><div style="font-size: 30px"><u>Productivity Max</u></div></h3></center>
</div>
<br><div id="GetPic"><left><img src="images/GETERDONE.jpg" style="width: 17vw; vertical-align: middle"></left></div>
<div id="ProducMax">Productivity Max is a simple personal activity planner with a small twist. Productivity Max calculates how much time
you should spend per activity, taking into account all of your regular activities in a day such as meals, breaks and work/school. In
addition, Productivity Max is also able to suggest what changes you should make to your regular activities to make more time for other
activities, thus making yourself more productive! Which has been our ultimate goal with Productivity Max.
<br><br><center><a href="ProductivityMax.html"><u>Click here for more info</u></a></center></div>
</div>
</body>
</html>
我和我的朋友正在开发一个网站，我们遇到了问题。当我加载页面时，所有的CSS都被应用，网站看起来很好，当我旋转方向时，一切都很好。然而，当我旋转回纵向时，媒体内的所有CSS都以纵向方式查询 480px设备宽度设备，移动设备的CSS文件内部停止工作，并再次转到默认CSS。
这是一个问题。如果我回到景观，它会再次起作用。我不确定如何进一步解释这个问题。我非常喜欢CSS和Stack Overflow，所以请原谅我凌乱的代码和这个问题的无组织性。
感谢所有帮助， 谢谢。