我正在尝试创建我的第一个网站并在其中添加内容，但是，如果将屏幕缩小到平板电脑或移动屏幕的大小，则无法正确缩小屏幕，并使所有内容混乱。我没有使用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>
答案 0 :(得分：0)
要在较小的设备或实际上任何设备的屏幕尺寸上修复样式，只需使用：
@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]
希望您觉得这有用
最好的问候，哈立德。
答案 1 :(得分：0)
您需要使用媒体查询，也许这会有所帮助https://www.w3schools.com/css/css_rwd_mediaqueries.asp
答案 2 :(得分：-1)
首先引起我注意的是 news1 div容器的固定宽度为 1250px。
用90％或相对更好的相对单位代替它实际上可以避免您的问题。