Responsive Design @media Breakpoints funktioniert nicht

Ich bin neu bei @media und habe einige Schwierigkeiten bei der Einrichtung meiner Haltepunkte. Ich habe eine mobile erste Website mit 4 Spalten und einer Fußzeile, die verschiedene Ansichten für mobile, Desktop/Tablet-Landschaft und Desktop/Tablet-Porträt haben soll.Responsive Design @media Breakpoints funktioniert nicht

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

Für mobile würde Ich mag das für mobile stapeln folgende:
Sitemap/menu 100%
content1 100%
content2 100%
Sidebar 100%
Fuß 100%

Für die Landschaft:
Sitemap/Menü 16,66%
content1 33,33 %%
content2 33,33 %%
Sidebar 16,66%
Fuß 100%

Und für Portrait:
Sitemap/menu 100%
content1 50 %
content2 50%
Seitenleiste 83,33%
Fuß 100%

Hier ist meine CSS, die im Grunde eine Copy/Paste-Vorlage mit einigen Änderungen ist:

/* 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} 
}

I 2 Bruchstellen bekommen (Landschaft und mobil oder Porträt und mobil) zu arbeiten, aber nie alle drei an die Arbeit. Kleine Hilfe. Vielen Dank.

Quelle

2016-04-30 testing123

Oh duh. OK. Wenn Sie die hinzugefügte CSS aus der @media-Bildschirmlandschaft verschieben, funktioniert sie. Ich hatte ursprünglich nur 2 Haltepunkte geplant, also war es egal, aber mit 3 Punkten. Endgültige 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}

Quelle

2016-04-30 14:26:31 testing123

Responsive Design @media Breakpoints funktioniert nicht

Antwort

Verwandte Themen