Question

我是@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％
content1 100％
content2 100％
侧边栏100％
足100％

对于风景：
sitemap / menu 16.66％
content1 33.33 %%
content2 33.33 %%
侧边栏16.66％
足100％

纵向：
网站地图/菜单100％
content1 50％
content2 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个工作。没什么帮助。感谢。

Answer 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}

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

1 个答案: