отзывчивый дизайн @media точки останова не работают

Я новичок в @media, и у меня возникают трудности с настройкой точек останова. У меня есть мобильный первый сайт с 4 колонками и нижним колонтитулом, который я хочу иметь разные виды для мобильных, настольных/планшетов и рабочего стола/планшета.отзывчивый дизайн @media точки останова не работают

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

Для ландшафта:
карта сайта/Меню 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 для работы. Маленькая помощь. Благодарю.

источник

2016-04-30 testing123

Oh duh. ОК. Перемещение добавленного 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}

источник

2016-04-30 14:26:31 testing123

отзывчивый дизайн @media точки останова не работают

ответ

Смежные вопросы