无法显示我的手机响应的样式

问题描述：

我的手机与@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我不能显示任何内容。另外，如果我要将我的“RESPONSIVE NEW ICONS”缩进到与我的.nav相同的级别，那么PC的实际站点将不会显示，并且响应显示不清楚原因。

是您的CSS是否正确？它缺少分隔括号（'{}'），因此可能会对此产生困惑。 – gabe3886

您在媒体查询中给出了display：none for nav。这就是为什么它没有显示 – athi

，除了'.nav'你还没有任何内容，因为'.nav'被隐藏在760px以下，你什么都看不到。添加一些内容... – Johannes

答

使用媒体查询这样

@media only screen and (max-width: 760px) {

使用CSS这样

.container { 
      background-color: #FFF; 
      display: flex; 
      flex-direction: row-reverse; 
    }

使用分号和{}在CSS定义类样式

我所有使用SASS的样式都显示出来。我的问题是当我点击媒体查询时，我的内容不显示。 – Paiz

无法显示我的手机响应的样式

相关推荐