使用@media 设计我的手机响应式时遇到问题。我可以在网站上显示我的容器和导航，但不能在我的@media 上显示。
//========================================================
/* HEADER CONTAINER */
//========================================================
.container
background-color: #FFF
display: flex
flex-direction: row-reverse
.container:after
content: ""
display: block
clear: both
visibility: none
//========================================================
/* SITE NAVIGATION */
//========================================================
.nav
//background: pink
float: right
display: inline-block
.nav ul li
float: left
padding: 10px
list-style-type: none
.nav ul li a
text-decoration: none
color: #333
.nav ul li a:hover
color: gold
cursor: pointer
//========================================================
/* RESPONSIVE MENU ICONS */
//========================================================
.menu-icons
width: 50px
height: 50px
background-color: pink
margin-left: auto
margin-right: 10px
cursor: pointer
align-items: center
display: block
position: relative
span,
span:before,
span:after
content: ""
display: block
width: 100%
height: 2px
position: relative
background: #333
span:before
top: 15px
span:after
bottom: 17px
//========================================================
/* MOBILE NAVIGATIONS */
//========================================================
@media (max-width: 760px)
.nav
display: none<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/app.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta charset="utf-8">
<title>My portfolio</title>
</head>
<body>
<div class="container">
<div class="menu-icons">
<span><div class="bar1">
<div class="bar2">
<div class="bar3"></span>
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>现在我的问题是，当我达到最大宽度 760px 时无法显示任何内容。另外，如果我将我的“响应式新图标”缩进到与我的 .nav 处于同一级别，则不会显示 PC 的实际站点，并且不确定为什么会显示响应式。
最佳答案
像这样使用媒体查询
@media only screen and (max-width: 760px) {
像这样使用css
.container {
background-color: #FFF;
display: flex;
flex-direction: row-reverse;
}
在 css 中使用分号和 { } 定义类样式
关于html - 无法显示我的移动响应的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43589380/