javascript - 我的网站无法正确缩小到手机和平板电脑尺寸，我该如何解决？

Question

我正在尝试创建我的第一个网站并向其中添加内容，但是当屏幕缩小到平板电脑或手机屏幕尺寸时，它无法正确缩小并使所有内容变得杂乱无章。我没有使用过 CSS 网格，我不确定这是否会导致问题。我也一直在考虑开发桌面网站，我看到很多人正在开发移动设备，然后调整尺寸以适应更大的屏幕。任何帮助将不胜感激!谢谢!

/* MOBILE AND GLOBAL STYLES */

/* applies to screens smaller than 500px (first breakpoint) */
/* and above unless overwritten below */

body {
background: grey;
margin: 0;
font-family: Arial;
}


header {
grid-area: header;
background: darkblue;
color: white;
margin: 0;
font-family: rockwell;
font-size: 450%;
text-align: center;
height: 100%;
}

main{
color: black;
font-family: rockwell;
font-size: 150%;
margin-left: 50px;
margin-right: 50px;
}

p{
margin-left: 35px;
}

h1{
text-decoration: underline;
text-align: center;
}

h2{
text-decoration: underline;
text-align: center;
}

h3{
text-align: center;
text-decoration: underline;
}

nav {
grid-area: menu;
display: none;
clear: both;
justify-content: center;
background: black;
flex-direction: column;
}

nav a {
padding: 1.25em 1.5em;
color: black;
background: #A09C9C;
text-decoration: none;
transition: all 1.5s;
width: 100%;
text-align: center;
font-size: 130%;
font-family: fantasy;
border-right: 1px solid white;
border-top: 5px solid white;
border-bottom: 5px solid white;
}

.devs{
text-align: center;
}

nav a:hover {
color: white;
background: grey;
}

.menu {
background: #555;
text-align: center;
color: grey;
line-height: 2em;
}

.menu-toggle {
display: flex;
}

.fa {
padding: 20px;
font-size: 30px;
width: 70px;
text-align: center;
text-decoration: none;
margin: 8px 8px;
border-radius: 50%;
transition: .6s
}

.fa:hover {
opacity: 0.7;
}

.fa-facebook {
background: #3B5998;
color: white;
}

.fa-twitter {
background: #55ACEE;
color: white;
}

.fa-youtube {
background: #dd4b39;
color: white;
}

.fa-instagram {
background: #007bb5;
color: white;
}

.media{
position: sticky;
}

.image{
position: sticky;
}

.apibox {
background-color: lightgrey;
width: 800px;
border: 5px solid black;
padding: 25px;
margin-left: 30%;
margin-top: 3%;
}

.vance {
border: 0;
width: 560px;
height: 315px;
align: left;
margin-left: 15%;
margin-bottom: 2%;
}

.vancevideo {
width: 560px;
height: 315px;
margin-left: 7%;
align: left;
margin-bottom: 2%;
}

.superbowl {
border: 0;
width: 560px;
height: 315px;
align: left;
margin-left: 15%;
margin-bottom: 2%;
}

.superbowlvid{
width: 560px;
height: 315px;
margin-left: 7%;
align: left;
margin-bottom: 2%;
}

.news1 {
background-color: lightgrey;
width: 1250px;
border: 5px solid black;
padding: 25px;
margin-left: 15%;
margin-top: 3%;
}

.animation {
position: absolute;
/* comment out 'top' and 'left' and see what happens */
top: 176px;
left: 550px;
box-sizing: border-box;
width: 105px;
height: 62px;
padding: 0 1em;
background-color: #e5e5e5;
animation-name: movingBox;
animation-duration: 30s;
animation-iteration-count: infinite; /* infinite */
animation-direction: alternate;
animation-timing-function: ease-in-out;
font-size: 100%;
text-align: center;
}

.animation2 {
position: absolute;
/* comment out 'top' and 'left' and see what happens */
top: 176px;
left: 550px;
box-sizing: border-box;
width: 87px;
height: 62px;
padding: 0 1em;
background-color: #e5e5e5;
animation-name: movingBox;
animation-duration: 30s;
animation-iteration-count: infinite; /* infinite */
animation-direction: alternate;
animation-timing-function: ease-in-out;
font-size: 100%;
text-align: center;
}

.animation3 {
position: absolute;
/* comment out 'top' and 'left' and see what happens */
top: 176px;
left: 550px;
box-sizing: border-box;
width: 87px;
height: 70px;
padding: 0 1em;
background-color: #e5e5e5;
animation-name: movingBox;
animation-duration: 30s;
animation-iteration-count: infinite; /* infinite */
animation-direction: alternate;
animation-timing-function: ease-in-out;
font-size: 110%;
text-align: center;
}

.animation4 {
position: absolute;
/* comment out 'top' and 'left' and see what happens */
top: 190px;
left: 550px;
box-sizing: border-box;
width: 87px;
height: 70px;
padding: 0 1em;
background-color: #e5e5e5;
animation-name: movingBox;
animation-duration: 30s;
animation-iteration-count: infinite; /* infinite */
animation-direction: alternate;
animation-timing-function: ease-in-out;
font-size: 110%;
text-align: center;
}

.mail {
width: 70px;
height: 70px;
}

.gamepass {
width: 150px;
height: 80px;
}

.footballamerica {
width: 150px;
height: 80px;
}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

/* Hide the images by default */
.mySlides {
display: none;
}

/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
color: white;
font-size: 30px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
font-family: Cooper Black;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: white;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background-color: #717171;
}

/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}


@keyframes movingBox {
0%   { background-color:#e5e5e5; left: 523px; top: 190px;}
25%  { background-color:#e5e5e5; left: calc(78% - 200px); top: 190px;}
50%  { background-color:#e5e5e5; left: calc(38% - 200px); top: 190px; }
75%  { background-color:#e5e5e5; left: calc(78% - 200px); top: 190px; }
100% { background-color:#e5e5e5; left: 523px; top: 190px; }
}


/* comment in for CSS-only solution: */
.menu:hover + nav,
nav:hover {
display: flex;
}

.team-wiki {
text-align: center;
margin-left: 25%;
}

/* TABLET STYLES */
.menu{
color: white;
}
@media screen and (min-width: 500px) {

/* applies to screens wider than 499px */

body {
background: grey;
}
.menu {
display: none;
min-width:500px;
}
nav {
display: flex;
flex-direction: row;
}

nav a {
padding: 1.25em 0.5em;
color: white;
background: darkred;
text-decoration: none;
transition: all 1.5s;
}
/* just change the menu colours on hover above mobile widths */
nav a:hover {
color: white;
background: darkred;
opacity: 0.7;
}


}


/* DESKTOP STYLES */

@media screen and (min-width: 1000px) {

/* applies to screens wider than 999px */

body {
background: #e5e5e5;
}

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NFL News</title>
<link rel="icon" type="image/png" href="nfl.png">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">
</head>
<header><img border="0" alt="NFL Logo" src="nfl.png" width="80" height="80" 
align="left">NFL FANSITE <img border="0" alt="NFL Logo" src="nfl.png" 
width="80" height="80" align="right"></header>
<body class="grid">
<div id="wrapper"></div>

<div class="menu" id="menu-toggle">MENU</div>
<nav id="menu-nav">
 <a href="index.html">HOME</a>
 <a href="news.html">NEWS</a>
 <a href="teamhistory.html">TEAM HISTORY</a>
 <a href="#">DISCUSSIONS</a>
 <a href="gallery.html">GALLERY</a>
</nav>

<div class="animation2">
<a href="https://www.footballamerica.co.uk/en/"><img 
class="footballamerica" src="footballamerica.jpg" alt="Link to the football 
america website"/></a>
</div>
<a href="https://www.facebook.com/NFL/" class="fa fa-facebook"</a>
<a href="https://twitter.com/NFL? 
ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" class="fa fa- 
twitter"></a>
<a href="https://www.youtube.com/user/NFL" class="fa fa-youtube"></a>
<a href="https://www.instagram.com/nfl/?hl=en" class="fa fa-instagram"></a>



<main>
<h1>
NFL News
</h1>
<h3>
Vance Joseph Fired
</h3>
<img class="vance" alt="Picture of developers" src="Vance.jpg">
<iframe class="vancevideo" src="https://www.youtube.com/embed/nny6aUi4lg8" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- 
picture" allowfullscreen></iframe>
</iframe>
<div class="news1">
John Elway has fired Vance Joseph after two consecutive season losses 
without any playoff chances. The 2017 season that Vance Joseph first coached 
ended in a 5-11 record for the Denver Broncos and the 2018 season ending 
with a 6-10 record. Before the period of Vance Joseph as head coach, Gary 
Kubiak had led the Broncos to a SuperBowl victory in 2015 against the 
Panthers. In an interview John Elway said "I spoke with Vance this morning 
and thanked him for all of his hard work as our head coach". Elway also said 
that "Vance made a lot of strides and deserves credit for how hard and 
competitively the team played this season". Many of the fans of the Broncos 
were very unhappy, especially towards the back-end of the 2018 season 
because of the downward spiral that happened after the first few weeks of 
the season and also because of the lack of competitiveness in important 
games. Vance Joseph still expressed how appriciative he was for his 
opportunity in Denver by saying "I want to thank John Elway, Joe Ellis and 
the organisation for the opportunity to serve as the head coach of the 
Denver Broncos" and "It's disappointing not being able to finish what we 
started, but I'm incredibly proud of the players and coaches for how they 
fought and worked every week".
</div>
<br>
<br>
<br>
<br>
<h3>
SuperBowl Odds
</h3>
<img class="superbowl" alt="superbowl image" src="SuperBowl.jpg">
<iframe class="superbowlvid" src="https://www.youtube.com/embed/sog0CFGH-_4" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- 
picture" allowfullscreen>
</iframe>
<br>
Clearly with the NFL, anything can happen, however it is interesting to look 
at the predictions that people have made about the playoffs and who will 
ultimately win the SuperBowl. Many sources are labelling the New Orleans 
Saints as having the highest chance of winning the Super Bowl with 
PaddyPower, Bet365, WilliamHill and Betfair all posted 13/5 odds on this 
happening. Next, with no surprises, is the Kansas City Chiefs who have 9/2 
odds on Bet365, Ladbrokes, WilliamHill and Betfair. It is not surprising 
that these two teams are the top two in this situation due to how impressive 
their seasons have been so far this year. Closely matching or following the 
Chiefs are the Rams who have the same odds of 9/2 on Bet365, BetVictor and 
Boyle Sports, however they also have some 11/2 odds on betting sites such as 
SkyBet, WilliamHill and 10Bet which makes us think that their chances aren't 
just as great as the Chiefs. Finally in the 4th position is the New England 
Patriots who have 6/1's on the likes of WilliamHill, Betfair, PaddyPower and 
Betway to name a few. The New England Patriots are always great contenders 
in the playoffs and always seem to be a team that can clutch victories in 
important situations. The video displayed here, shows the NFL's predictions 
of the probability of some of the different teams chances of winning the 
Super Bowl. They go as follows: New Orleans Saints - 17.1% | Los Angeles 
Rams - 11.4% | Chicago Bears - 10.3% | Baltimore Ravens - 6.8% | Dallas 
Cowboys - 6.0%. Either way, this year in the NFL has been very unpredictable 
so any of the teams that have reached the playoffs are viable to be Super 
Bowl 2019 winners.
<br>
<br>
<br>
</main>

<script src="js/scripts.js"></script>
</body>
</html>

Answer 1

要在较小的设备或实际上任何设备屏幕尺寸上修复样式，只需简单地使用:

@media (min-width: 768px){
     >Your Code here
}

或

@media (max-width: 1200px){
     >Your Code here
}

或

 @media (min-width: 768px) and (max-width: 1200px){
      >Your Code here
 }

还有一个非常有用的库，称为 Bootstrap，用于创建响应式网站检查一下:[url]

希望你觉得这有用

此致，哈立德。