CSS 单列媒体查询答案

【问题标题】：CSS single column media queryCSS 单列媒体查询
【发布时间】：2018-05-11 12:04:36
【问题描述】：

尝试创建一个 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 version

网站上某一页面的代码

<!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">&nbsp;&nbsp;
		<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&nbsp;is a community simulation&nbsp;video game 
		series developed and published by&nbsp;Nintendo, in which the human player 
		lives in a&nbsp;villiage&nbsp;inhabited by anthropomorphic animals, carrying out 
		various activities including fishing, bug catching, fossil hunting, etc. 
		The series is notable for its&nbsp;open ended&nbsp;gameplay and extensive use of 
		the game systems internal&nbsp;clock&nbsp;and calender&nbsp;to simulate real passage of 
		time.</p> <br>First Release:&nbsp;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>

我还想隐藏页脚和气球 gif。在导航按钮下不知道在这篇文章中添加什么其他信息以获得适当的帮助

【问题讨论】：

您能否提供一个指向您的网站的链接，因为借助所附图片很难理解您实际要查找的内容，而且您的 CSS 也不完整。
在上面添加了完整的 CSS 表，它只是一个不在服务器上的文件

标签： html css mobile media-queries

【解决方案1】：

不完全确定您在导航按钮下显示 gif 和页脚是什么意思，但以下代码将清除您的移动列问题。

将您的媒体查询更改为：

@media only screen 
    and (max-width : 667px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 1) {

在媒体查询内部做：

body {
  display: block;
}
.content {
  display: block;
}

【讨论】：

我希望某些东西不要出现在移动视图中