在不影响布局的情况下隐藏平板和手机侧边栏（保持与桌面相同的宽度）

Question

桌面视图

Mobile/Tablet 查看

上面显示了我想要的。如您所见，桌面版有 width=1024px，还有 mobile/tablet。唯一改变的元素是侧边栏，它将隐藏在 mobile/tablet。

像往常一样，我使用视口元和媒体查询来完成响应式布局。

<meta name="viewport" content="width=device-width, initial-scale=1">
@media only screen and (max-width: 1023px){}

不过这次好像不一样了。我不能使用 initial-scale=1 因为它只会显示网站的一半。我不知道我应该为视口元更改什么。这样它就可以很好地固定在平板电脑和手机上。希望你们中的一些人能给我一些建议。谢谢！

$(".show-hide-btn").click(function() {
  $(".menu_resp").toggleClass("menuvisible")
 });

.floatleft{ float: left;}
.floatright{ float: right;}
.sectionpanel{width: 180px; line-height: 1em !important; background-color: #e5e5e5;}
.sectionpanel .loginsect{background-color: #c5d960; padding: 18px 14px;}
.sectionpanel .whiteborder{margin: 10px 0; border: 1px solid #f9fcfd;}
.sectionpanel .loginicon{padding-top:8px;}
.sectionpanel .logininfo{padding-left:10px;}
.sectionpanel .styleSelect select{font-size:10px; font-weight: bold; width: 152px; border-radius:5px; padding: 5px; border: 1px solid #d2d0d0;background: transparent; -webkit-appearance: none;}
.sectionpanel .styleSelect { overflow: hidden; background: url("../images/icons/dropdownbtn.png") no-repeat right #fff; border-radius:5px;}

.sectionpanel .menunav{background-color:#e5e5e5;}
.sectionpanel .menunav .nav a{font-size: 12px; color:#565656; display: block; width: 155px; padding: 8px 10px 8px 15px;}
.sectionpanel .menunav .nav a:hover, .sectionpanel .menunav .nav a.active{background-color:#3f98ce; color: #fff; width: 155px; padding: 8px 10px; border-left: 5px solid #2b6a91; }


@media only screen and (max-width: 1023px){
  .header-right-btns{
  position:fixed;
  left:0;
  display:block;
  z-index: 100;
 }

 .show-hide-btn{
  background:url(https://image.ibb.co/kL1Gdc/menu_respo.jpg) no-repeat left top;
  width:42px;
  height:42px;
  float:left;
  text-indent:-9999px;
 } 



 #wrapper_menu .first, #wrapper_menu .first{
  border-top:none;
 }

 #wrapper_menu .last, #wrapper_menu .last{
  border-bottom:none;
 }

 .menuhidden{
  position: absolute;
  top: 50px;
  left: -252px;
  background:#3d3b3c;
  z-index:10;
  transition:left ease-in-out 0.2s;
  z-index: 1000;
 }

 .menuvisible{
  left: 0;
 } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column sectionpanel">
  <div class="header-right-btns">
    <a href="#" class="show-hide-btn"></a>
  </div>
  <div id="wrapper_menu" class="menu_resp menuhidden">
    <div class="loginsect">
      <div class="greentxt txt12">Logged in as</div>
      <div class="greentxt_bold txt12">School</div>
      <div class="whiteborder"></div>
      <div>
        <div class="floatleft logininfo">
          <div class="dartbluetxt txt10">Welcome</div>
        </div>
      </div>
      <div class="clear"></div><br/>
      <div class="styleSelect">
        <select>
          <option value="">Please select premises</option>
          <option value="">Please select premises</option>
          <option value="">Please select premises</option>
        </select>
      </div>
    </div>
    <div class="menunav">
      <div class="nav"><a class="active" href="#"><div class="hicon">Homepage</div></a></div>
      <div class="nav"><a href="#"><div class="aicon">Main Navigation 02</div></a></div>
      <div class="nav"><a href="#"><div class="aicon">Main Navigation 03</div></a></div>
      <div class="nav"><a href="#"><div class="aicon">Main Navigation 04</div></a></div>
      <div class="nav"><a href="#"><div class="aicon">Main Navigation 05</div></a></div>
    </div>
  </div>
</div>
<div class="column secctn">
  content
</div>

Answer 1

你可以用这个

sidebar {
  display: none;
}

main {
  width:100%;
}

@media only screen and (min-width: 1200px){
  main {
    width:800px;
  }

  sidebar {
    width: calc(224px);
    display: block;
  }
}

你可以使用这个：

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

在这里，是这样的： https://jsfiddle.net/4vec4kgy/4/

在不影响布局的情况下隐藏平板和手机侧边栏（保持与桌面相同的宽度）

Hide the sidebar on tablet and mobile without affecting layout (maintain the same width as desktop)

html

media-queries

viewport

responsive

meta