响应式设计CSS使用小型浏览器填充整个屏幕

我试图使用响应式CSS媒体查询来隐藏我的侧边栏，除非屏幕很大，或者是足够大的平板电脑和横向模式。这似乎是基于调整我的浏览器的工作，直到我达到一定的大小，它填补了整个屏幕。我也使用Twitter Bootstrap样式，但不是响应式样式，所以我不明白这可能是一个问题。响应式设计CSS使用小型浏览器填充整个屏幕

是否有另一个媒体查询，我应该使用？我也试过min-width为0，max-width为320，那没用。

例子： Working sidebar, fills side and is displayed Not working, once reached a certain size it fills entire browser window

HTML：

<div class="row"> 
    <div class="span2 sidebar"> 
     <a href="@Url.Action("Index", "Home")"> 
      <h3>Link Home</h3> 
     </a> 
    </div> 
    <div class="span10"> 
     @RenderBody() 
    </div> 
</div>

CSS

html { 
    height: 100%; 
} 

.sidebar { 
    background: #333; 
    margin: 0; 
    padding-left: 1.5em; 
    height: 100%; 
    -moz-box-shadow: 0 0 5px #888; 
    -webkit-box-shadow: 0 0 5px#888; 
    box-shadow: 0 0 5px #888; 
    min-height: 100%; 
    position: absolute; 
    display: none; 
} 

h1, h2, h3, h4, h5, h6 { 
    font-family: 'Fenix', serif; 
    font-weight: 400; 
} 

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    /* Styles */ 
    .sidebar { 
     display: none; 
    } 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
    /* Styles */ 
    .sidebar { 
     display: none; 
    } 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
    /* Styles */ 
    .sidebar { 
     display: none; 
    } 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
    /* Styles */ 
    .sidebar { 
     display: none; 
    } 
} 

/* iPads (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
    /* Styles */ 
    .sidebar { 
     display: block; 
    } 
} 

/* iPads (portrait) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
    /* Styles */ 
    .sidebar { 
     display: none; 
    } 
} 

/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1224px) { 
    /* Styles */ 
    .sidebar { 
     display: block; 
    } 
} 

/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
    /* Styles */ 
    .sidebar { 
     display: block; 
    } 
} 

/* iPhone 4 ----------- */ 
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { 
    /* Styles */ 
    .sidebar { 
     display: none; 
    } 
}

来源

2013-03-09 Cody

只需使用

// Landscape phone to portrait tablet 
@media (max-width: 767px) { 
    .sidebar { 
      display: none; 
    } 
}

而且你为什么不使用Twitter的引导时所使用的CSS响应？有一个类叫.hidden-phone，非常有用。

最常用的媒体querys是

// Large desktop 
@media (min-width: 1200px) { 
} 

// Portrait tablet to landscape and desktop 
@media (min-width: 768px) and (max-width: 979px) { 
} 

// Everything below 1024px 
@media (max-width: 979px) { 
} 

// Landscape phone to portrait tablet 
@media (max-width: 767px) { 
} 

// Landscape phones and down 
@media (max-width: 480px) { 
}

来源

2013-03-10 00:04:21 Merec

为什么我没有使用CSS：我甚至不知道有类隐藏专门为手机/平板电脑的事情。我认为这只是调整窗口的大小，因为它变小了......谢谢。这是非常容易的。 – Cody 2013-03-10 00:11:56

引导具有responsive utility classes帮你轻松做到这一点。例如.hidden电话，。可见桌面

而是复杂的生活，并创建自定义CSS类的，尽量简单的东西如：

<div class="row"> 
<div class="span2 sidebar hidden-phone"> 
    <!-- sidebar details --> 
    </a> 
</div> 
<div class="span10"> 
    <!-- main body --> 
</div> 
</div>

祝你好运！

来源

2013-03-10 00:04:07

响应式设计CSS使用小型浏览器填充整个屏幕

回答

相关问题