尝试创建一个CSS媒体查询，该查询在Web浏览器中查看时将我的网站转换为单列。（当前3列）到目前为止，我认为这是不正确的
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: row;
margin: 0;
text-align:center;
}
.col-1 {
background: #D7E8D4;
flex: 1;
background-image: url('white.jpg');
text-align:center;
}
.col-2 {
padding: 4px;
display: flex;
flex-direction: column;
flex: 5;
text-align: center;
font-family: "Arial Black";
font-size: 20pt;
background-color: #FFFF82;
}
}
.col-3 {
border-style: solid;
display: flex;
flex-direction: column;
flex: 5;
text-align: center;
}
.content {
display: flex;
flex-direction: row;
}
.content > main {
flex: 3;
min-height: 60vh;
text-align:center;
border-style: solid;
}
.content > side {
background: gray;
flex: 1;
text-align:center;
border-style: solid;
}
header, footer {
background: #FFDB4A;
height: 30vh;
text-align:center
}
aside, article {
border-style:solid
}
header {
padding: 1em;
background-image: url('acnl.jpg');
}
.Footer {
font-family: "Arial";
font-size: 14pt;
position: absolute;
right: 0;
bottom: -100px;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
height: 100px;
}
p {
white-space: normal;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}
li a {
display: block;
color: #731F02;
padding: 8px 16px;
text-decoration: none;
background-color: #53FF53;
font-size: 25px;
font-family: "Arial Black";
}
li a:hover {
background-color: #FF99CC;
color: #002200;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
@media only screen
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 1)
{
header {
display:none;
}
.col-2{
text-align:left;
}
.col-3 {
width: 100%;
}
footer {
display:none;
}
body {
float:left;
}
.col-1 {
text-align:left;
display:list-item
}目前移动之前我网站的图片Web版本
网站上的一个页面的代码
<!doctype html>
<title>Program 7</title>
<link href="cartyCSS.css" rel="stylesheet" type="text/css">
<body>
<nav class="col-1"><ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="QRcodes.html">QR codes</a></li>
</ul><br>
<img alt="gift" height="238" longdesc="floating present" src="Present.gif" width="250"></nav>
<div class="col-2">
<header class="col-3">
<img alt="acnl" height="160" longdesc="acnl logo" src="Animal_Crossing_Logo.png" width="240">
<img alt="leaf" height="160" longdesc="acnl leaf" src="leaf.png" width="160"></header>
<main class="content">
<article class="col-2">This is one of the many villagers you can get<br>
<img alt="Fauna" height="265" longdesc="villiager" src="Fauna.png" width="200"></article>
<aside class="col-3"><p>Animal Crossing is a community simulation video game
series developed and published by Nintendo, in which the human player
lives in a villiage inhabited by anthropomorphic animals, carrying out
various activities including fishing, bug catching, fossil hunting, etc.
The series is notable for its open ended gameplay and extensive use of
the game systems internal clock and calender to simulate real passage of
time.</p> <br>First Release: Animal Crossing; April 14, 2001 <br></aside>
</main>
<footer class="Footer">Victoria Carty<br>
<a href="mailto:victoria.carty@nc.navarrocollege.edu">
victoria.carty@nc.navarrocollege.edu</a><br>
Beginning Web Programming | ITSE-1311-NT1-17/FA
</footer>
</div>
</body>我也想隐藏页脚和Ballon GIF。在导航按钮下不确定要在此帖子中添加哪些其他信息以获得适当的帮助
不完全确定您在nav按钮下显示GIF和页脚的含义，但是以下代码将清理您的手机列问题。
将您的媒体查询更改为：
@media only screen
and (max-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 1) {
和媒体内部查询要做：
body {
display: block;
}
.content {
display: block;
}