侧栏{

Question

所以我在网站上工作，有一点问题。当从计算机上查看网站时一切都很好，但是当在智能手机或平板电脑上查看时，3条菜单按钮会消失吗？这是代码。

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>


    <link rel="stylesheet" type="text/css" href="/css/style.css">

    <script type="text/javascript">
      $(window).load(function(){
        $("[data-toggle]").click(function() {
          var toggle_el = $(this).data("toggle");
          $(toggle_el).toggleClass("open-sidebar");
        });
         $(".swipe-area").swipe({
              swipeStatus:function(event, phase, direction, distance, duration, fingers)
                  {
                      if (phase=="move" && direction =="left") {
                           $(".container").addClass("open-sidebar");
                           return false;
                      }
                      if (phase=="move" && direction =="right") {
                           $(".container").removeClass("open-sidebar");
                           return false;
                      }
                  }
          }); 
      });

    </script>

  </head>
  <body id="all">
      <div id="headerMenu">
          <div id="logo">
              <a href="/">Website</a>
          </div>
      </div>

    <div id="page-content">
        <a href="/">Link</a>
        <p>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </p>
    </div>


    <div class="container">
      <div id="sidebar">
          <ul>
              <form action="/search/index.php" method="POST">
                  <li><input id="search" name="search" size=15 type="text" placeholder="search..."></li>
              </form>
              <li><hr></li>
              <li><a href="/">Home</a></li>
              <li><a href="/about">About</a></li>
              <li><a href="/projects">Projects</a></li>
              <li><hr></li>
              <li><a href="/register">Login / Sign Up</a></li>
          </ul>
      </div>
      <div class="main-content">
          <div class="swipe-area"></div>
          <a data-toggle=".container" id="sidebar-toggle">
              <span class="bar"></span>
              <span class="bar"></span>
              <span class="bar"></span>
          </a>
      </div>
    </div>


  </body>
</html>

  body, html {
  margin: 0px;
  overflow-x: hidden;
  font-family: helvetica;
  font-size: 18;
}

#headerMenu {
    width: 100%;
    height: 80px;
    background-color: #212021;
    padding: 0px;
    margin: 0px;
    position: fixed;
    z-index: 100;
}

#logo a {
    color: #FFFFFF;
    text-decoration: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 30px;
    background-color: #212021;
    z-index: 10;
    position: fixed;
    top: 14px;
    left: 10px;
}


#page-content {
    position: absolute;
    top: 100px;
    z-index: 10;
    padding-left: 15%;
    padding-right: 15%;
}

#headerMenu img {
    width: 40px;
    height: 40px;
    background-color: #212021;
    padding-top: 5px;
    position: fixed;
    top: 7px;
    left: 70%;
}

#menu img{
    width: 50px;
    height: 50px;
    background-color: #212021;
    position: fixed;
    top: -2px;
    left: 85%;
}

#search {
    background-color: #FFFFFF;
    padding: 5px;
    margin-top: 15px;
    margin-left: 15px;
    color: #424242;
    border: 1px solid #212021;
    border-radius: 10px;
}


.container {
  position: fixed;
  width: 100%;
  height: 100%;
  right: 0px;
  -webkit-transition:  right 0.4s ease-in-out;
  -moz-transition:  right 0.4s ease-in-out;
  -ms-transition:  right 0.4s ease-in-out;
  -o-transition:  right 0.4s ease-in-out;
  transition:  right 0.4s ease-in-out;
}

.container.open-sidebar {
  right: 240px;
}

#sidebar {
  background: #313031;
  margin-top: 80px;
  position: absolute;
  z-index: 20;
  width: 200px;
  height: 100%;
  right: -240px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#sidebar ul li {
  margin: 0;
}

#sidebar ul li a {
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 100;
  color: white;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #313031;
  -webkit-transition:  background 0.3s ease-in-out;
  -moz-transition:  background 0.3s ease-in-out;
  -ms-transition:  background 0.3s ease-in-out;
  -o-transition:  background 0.3s ease-in-out;
  transition:  background 0.3s ease-in-out;
}

#sidebar ul li:hover a {
  background: #FFFFFF;
  color: #212021;
  border: 1px solid #313031;
}

.main-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  position: fixed;
}

.main-content .content{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
}

.main-content #sidebar-toggle {
  background: #212021;
  border-radius: 4px;
  display: block;
  padding: 10px 7px;
  position: fixed;
  z-index: 101;
  top: 13px;
  right: 2%;
}

.main-content #sidebar-toggle .bar{
  display: block;
  width: 25px;
  margin-bottom: 3px;
  height: 5px;
  background-color: #fff;
  border-radius: 1px;   
}

.main-content #sidebar-toggle .bar:last-child{
   margin-bottom: 0;   
}






/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 0px) and (max-width : 500px) {

    #page-content {
        padding-left: 20px;
        padding-right: 20px;
    }


}

@media only screen and (min-width : 250px) and (max-width : 300px) {

    #logo a {
        color: #FFFFFF;
        text-decoration: none;
        font-family: "Oxygen", Helvetica, Arial, sans-serif;
        font-size: 23px;
        background-color: #212021;
        position: absolute;
        top: 15px;
        left: 10px;
    }

    #headerMenu img {
        width: 37px;
        height: 37px;
        background-color: #212021;
        position: fixed;
        top: 7px;
        left: 65%;
    }

    #page-content {
        padding-left: 5%;
        padding-right: 5%;
    }

    #sidebar {
      background: #313031;
      margin-top: 80px;
      position: absolute;
      width: 170px;
      height: 100%;
      right: -240px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
    }


}

@media only screen and (min-width : 0px) and (max-width : 250px) {

    #logo a {
        color: #FFFFFF;
        text-decoration: none;
        font-family: "Oxygen", Helvetica, Arial, sans-serif;
        font-size: 19px;
        background-color: #212021;
        position: fixed;
        top: 17px;
        left: 5px;
    }

    #headerMenu img {
        width: 35px;
        height: 35px;
        background-color: #212021;
        position: absolute;
        top: 7px;
        left: 60%;
    }

    #page-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .container.open-sidebar {
      right: 250px;
    }

    #sidebar {
      background: #313031;
      margin-top: 80px;
      position: absolute;
      right: -250px;
      width: 100%;
      height: 250px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
    }

    #sidebar ul li a {
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 20px;
      font-size: 13px;
      font-weight: 100;
    }

}





@media only screen and (min-height : 300px) and (max-height : 400px) {

    #sidebar ul li a {
      padding-top: 15px;
      padding-bottom: 15px;
      padding-left: 25px;
      font-size: 15px;
      font-weight: 100;
    }


}

@media only screen and (min-height : 0px) and (max-height : 340px) {

    #sidebar ul li a {
      padding-top: 7px;
      padding-bottom: 7px;
      padding-left: 25px;
      font-size: 13px;
      font-weight: 100;
    }


}

Answer 1

轻松修复，在0到250最大媒体查询中，你有这个。

侧栏{

  background: #313031;
  margin-top: 80px;
  position: absolute;
  right: -250px;
  width: 100%;
  height: 250px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

正确的-250px正在推动您的菜单离开页面。将jsfiddle或codepen放在一起进行测试，看看我是否正确。

Answer 2

我已经弄明白了！ https://www.chromium.org/Home/chromecompatfaq

使用特定于浏览器的CSS或JavaScript对象症状：

有些CSS样式在Google Chrome中无效，即使它们看起来如此   在IE或Firefox中很好。问题：

每个浏览器都有自己的私有CSS选择器和JavaScript对象。   根据定义，使用这些类型的标记与之不兼容   其它浏览器。这些只应用于非关键任务（例如   添加文字阴影）。最安全的是不要使用它们。   建议：
Do not use document.all in JavaScript. This is an outdated IE feature, all modern browsers support document.getElementById() and you
应该使用它。       在诊断JavaScript问题时，请使用Google Chrome的内置JavaScript调试程序。       不要使用浏览器特定的（例如-moz- ， - webkit - ， - ie- *）css选择器，例如-moz-center或-webkit-highlight用于关键视觉   您网站的功能，而不是使用标准CSS。       不要使用CSS表达式（例如width：expression（））。这些仅适用于IE，存在严重的性能问题，已被弃用。

有用的工具

我们发现以下工具在诊断时非常有用   网站的兼容性问题。使用它们可以大大减少   修复兼容性所付出的努力和猜测   的问题：
Google Chrome has a variety of built-in tools to help developers track down compatibility and performance issues.
Firebug - An excellent Firefox extension that can help examining markup, JavaScript and performance issues.
Fiddler - A free Windows-only tool that allows you to examine and replay HTTP requests and responses.
其他资源
Google Chrome Webmaster FAQ - Contains all the information in this document and loads more.
quirksmode - Useful Information about which features are implemented in which browser.
Reporting a bug in Google Chrome - guidelines and pointers on how to write an effective clear bug report.

在SmartPhone或平板电脑上查看时，CSS的显示方式不同

2 个答案:

侧栏{