Question

使用@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的实际站点，并且响应式显示不确定原因。

Answer 1

使用像这样的媒体查询

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

像这样使用css

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

在css中使用分号和 {} 来定义类样式

无法显示我的移动响应的样式

1 个答案: