响应式设计@media 断点不起作用答案

【问题标题】：responsive design @media break points not working响应式设计@media 断点不起作用
【发布时间】：2016-04-30 11:22:33
【问题描述】：

我是 @media 新手，在设置断点时遇到了一些困难。我有一个移动优先网站，它有 4 列和一个页脚，我希望为移动设备、桌面/平板电脑横向和桌面/平板电脑纵向提供不同的视图。

<body style="margin:0;padding:0">

<div class="col-d2" style="float:right">
<h1 style="text-align:right;display:inline;margin:0">title</h1>
<nav id="burgerbtn">sitemap/menu
   </nav>
</div>

<div class="col-d4 lfloat" style="margin:100px 0"><div id="lcontent">
 content1
</div></div>

<div class="col-d4 lfloat" style="margin:100px 0"><div id="rcontent">
content2
</div></div>

<div id="paton" class="col-d2 column lfloat bar" style="background:yellow">
sidebar
</div>

<div style="background:green;clear:both;text-align:right">foot</div>
</body>

对于移动设备，我希望为移动设备堆叠以下内容：
站点地图/菜单 100%
内容1 100%
内容2 100%
侧边栏 100%
足 100%

横向：
站点地图/菜单 16.66%
含量1 33.33%%
含量2 33.33%%
侧边栏 16.66%
足 100%

对于肖像：
站点地图/菜单 100%
内容1 50%
内容2 50%
侧边栏 83.33%
足 100%

这是我的 css，它基本上是一个复制/粘贴模板，有一些变化：

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media screen and (min-width:950px) and (orientation:landscape){
    /* FOR DESKTOPS */
    .col-d1{width:8.33%}
    .col-d2{width:16.66%}
    .col-d3{width:25%}
    .col-d4{width:33.33%}
    .col-d5{width:41.66%}
    .col-d6{width:50%}
    .col-d7{width:58.33%}
    .col-d8{width:66.66%}
    .col-d9{width:75%}
    .col-d10{width:83.33%}
    .col-d11{width:91.66%}
    .col-d12{width:100%}
.column{min-height:975px}
.lfloat{float:left}
.rflex{display:flex;display:-webkit-flex}
.cflex{flex:auto}
#sitemap{margin:150px 0 0}
#rcontent{padding:0 50px 0 25px}
#lcontent{padding:0 25px 0 50px}
#paton{margin:0 !important}
}
@media screen and (orientation:landscape){
    /* LANDSCAPE */
    .col-land1{width:8.33%}
    .col-land2{width:16.66%}
    .col-land3{width:25%}
    .col-land4{width:33.33%}
    .col-land5{width:41.66%}
    .col-land6{width:49%}
    .col-land7{width:58.33%}
    .col-land8{width:66.66%}
    .col-land9{width:75%}
    .col-land10{width:83.33%}
    .col-land11{width:91.66%}
    .col-land12{width:100%}
}
@media screen and (min-width: 600px) and (orientation:portrait){
    /* FOR TABLETS: IF TIME ALLOWS */
    .col-tab1{width:8.33%}
    .col-tab2{width:16.66%}
    .col-tab3{width:25%}
    .col-tab4{width:33.33%}
    .col-tab5{width:41.66%}
    .col-d4{width:50% !important}
    .col-tab7{width:58.33%}
    .col-tab8{width:66.66%}
    .col-tab9{width:75%}
    #paton{width:83.33%}
    .col-tab11{width:91.66%}
    .col-d2{width:100% !important}
.bar{text-align:center}
}

我可以让 2 个断点工作（横向和移动或纵向和移动），但不能全部 3 个工作。帮助不大。谢谢。

【问题讨论】：

标签： css responsive-design media-queries

【解决方案1】：

哦，呵呵。好的。将添加的 css 移出@media 屏幕景观使其工作。我最初只计划了 2 个断点，所以没关系，但有了 3 个断点就可以了。最终的CSS：

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media screen and (min-device-width:950px) and (orientation:landscape){
    /* FOR DESKTOPS */
    .col-d1{width:8.33%}
    .col-d2{width:16.66%}
    .col-d3{width:25%}
    .col-d4{width:33.33%}
    .col-d5{width:41.66%}
    .col-d6{width:50%}
    .col-d7{width:58.33%}
    .col-d8{width:66.66%}
    .col-d9{width:75%}
    .col-d10{width:83.33%}
    .col-d11{width:91.66%}
    .col-d12{width:100%}
}
@media screen and (orientation:landscape){
    /* LANDSCAPE */
    .col-land1{width:8.33%}
    .col-land2{width:16.66%}
    .col-land3{width:25%}
    .col-land4{width:33.33%}
    .col-land5{width:41.66%}
    .col-land6{width:49%}
    .col-land7{width:58.33%}
    .col-land8{width:66.66%}
    .col-land9{width:75%}
    .col-land10{width:83.33%}
    .col-land11{width:91.66%}
    .col-land12{width:100%}
}
@media screen and (min-device-width:650px)and (orientation:portrait){
    /* FOR TABLETS: IF TIME ALLOWS */
    .col-tab1{width:8.33%}
    .col-tab2{width:16.66%}
    .col-tab3{width:25%}
    .col-tab4{width:33.33%}
    .col-tab5{width:41.66%}
    .col-d4{width:50%}
    .col-tab7{width:58.33%}
    .col-tab8{width:66.66%}
    .col-tab9{width:75%}
    #paton{width:75.33%}
    .col-tab11{width:91.66%}
    .col-d2{width:100%}
.bar{text-align:center}
}

.column{min-height:975px}
.lfloat{float:left}
.rflex{display:flex;display:-webkit-flex}
.cflex{flex:auto}
#sitemap{margin:150px 0 0}
#rcontent{padding:0 50px 0 25px}
#lcontent{padding:0 25px 0 50px}
#paton{margin:0 !important}

【讨论】：