基本上当我在另一台计算机上打开我的网页时，我的布局变得扭曲，一些东西从屏幕上消失了，你看不到它。
我设计网站的电脑屏幕比我的笔记本屏幕大。
然而，当我在我的笔记本电脑上使用网络浏览器缩放功能缩小时，一切都又回到了原点......为什么会这样？我该如何解决这个问题？
如果这是解决方案，我将如何使用媒体查询？
下面是代码：谢谢你
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Sun</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #91928C;
font-family: 'Titillium Web', Calibri, sans-serif;
background-image:url(starfield.jpg);
background-size:cover;
}
.nav-section {
width: 100%;
padding: 20% 0;
}
nav ul {
position: relative;
left: 550px;
bottom: 350px;
width: 700px;
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
border-radius: 63px;
}
nav ul li {
list-style: none;
display: inline-block;
}
nav ul li a {
display: block;
text-decoration: none;
padding: 40px 60px;
font-size: 20px;
text-transform: uppercase;
font-weight: 300;
color: #323642;
transition: background-color 0.5s ease;
}
nav ul li a:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.container {
margin-left:auto;
margin-right:auto;
}
.info {
position:relative;
top: -1800px;
left:550px;
opacity:1;
width:700px;
color: #ffffff;
}
.content {
position: relative;
bottom: 690px;
left: 500px;
background-color:#000000;
height:1200px;
width: 800px;
border: 3px solid white;
opacity:0.8;
}
h1 {
color:#FFFFFF
}
</style>
</head>
<body>
<div class="nav-section">
<nav>
<ul>
<li><a href="EarthProfile.html">Earth Profile</a></li>
<li><a href="EarthInfo.html">Info</a></li>
<li><a href="EarthVideo.html">video</a></li>
</ul>
</nav>
</div>
<div class="container">
<div class="content">
</div>
</div>
<div class="info">
<center><img src = "earth.gif" height="800" width="700"></center>
<br>
<br>
<hr> </hr>
<br>
<br>
<p></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript"></script>
</body>
</html>
答案 0 :(得分：0)
OKAYSO，为了解决您所陈述的问题，您可以跨平台获得不同的外观，因为不同浏览器显示各种元素的方式。要建立稳固的基线，请使用CSS Reset。
看看我改变了什么，这应该足以让你走上正确的道路。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Sun</title>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #91928C;
font-family: 'Titillium Web', Calibri, sans-serif;
background-image: url(starfield.jpg);
background-size: cover;
background-position: center center;
width: 100vw;
height: 100vh;
}
.nav-section {
width: 100%;
}
nav ul {
width: 70%;
max-width: 700px;
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
border-radius: 63px;
margin: auto;
}
nav ul li {
list-style: none;
display: inline-block;
}
nav ul li a {
display: block;
text-decoration: none;
padding: 40px 60px;
font-size: 20px;
text-transform: uppercase;
font-weight: 300;
color: #323642;
transition: background-color 0.5s ease;
}
nav ul li a:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.container {
margin-left:auto;
margin-right:auto;
}
.info {
opacity: 1;
width: 90%;
margin: auto;
color: #ffffff;
}
.content {
background-color: #000000;
height: 1200px;
width: 80%;
margin: auto;
max-width: 1000px;
border: 3px solid white;
opacity: 0.8;
}
h1 {
color:#FFFFFF
}
</style>
</head>
<body>
<div class="nav-section">
<nav>
<ul>
<li><a href="EarthProfile.html">Earth Profile</a></li>
<li><a href="EarthInfo.html">Info</a></li>
<li><a href="EarthVideo.html">video</a></li>
</ul>
</nav>
</div>
<div class="container">
<div class="content">
<div class="info">
<img src = "earth.gif" />
<hr> </hr>
<p></p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript"></script>
</body>
</html>
你最大的问题是使用＆＃34;职位＆＃34; （阅读！）和固定尺寸。使用相对于视口或父元素的维度。
祝你好运！