Медиа-запрос - как сделать div-дисплей на максимальной ширине, когда он изначально не отображается

У меня есть этот div с именем «container», который должен отображаться, когда максимальная ширина достигает 47em. Это можно активировать с помощью масштабирования. Это начальный дисплей - нет, но в запросе на носитель я меняю его на отображение блока. Проблема в том, что даже после масштабирования достаточно, чтобы получить максимальную ширину, чтобы стать 47em, она все еще ничего не отображает. Почему это и как я могу решить проблему?Медиа-запрос - как сделать div-дисплей на максимальной ширине, когда он изначально не отображается

Код: http://codepen.io/anon/pen/RWBJXv

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0px; 
 
    font-family: verdana, arial, helvetica, sans-serif; 
 
} 
 
    
 
@media (max-width: 47em) { 
 
    #container { 
 
    display: block; 
 
    } 
 
} 
 
    
 
div#container { 
 
    display:none; 
 
} 
 
    
 
div#nav { 
 
    position: relative; 
 
    width: 100%; 
 
    background: white; 
 
    box-shadow: 1px 1px 15px #888888; 
 
} 
 
    
 
div#logo { 
 
    border-right-style: solid; 
 
    border-width: 1px; 
 
    border-color: rgba(0, 0, 0, 0.15); 
 
    font-family: 'Myriad Pro Regular'; 
 
    font-weight: normal; 
 
    color: #1E3264; 
 
    font-size: 2em; 
 
}

<body> 
 
    <div id="container"> 
 
    <div id="nav"> 
 
     <div id="logo">TEST</div> 
 
    </div> 
 
    </div>

источник

2015-11-03 BubbleTree

Я неправильно понял. Удаление комментария. –

Ваш код имеет несколько проблем:

Прежде всего, div#container является селектором CSS с более высокой специфичностью чем #container, которые вам используются внутри вашего медиа-запроса, поэтому общее правило имеет приоритет.

Во-вторых, убедитесь, что вы всегда ставите свои медиа-запросы после своих общих правил.

http://codepen.io/anon/pen/zvLLPa

источник

2015-11-03 16:32:17 connexo

Кажется, порядок & Специфичность вопрос.

Попробуйте изменить этот

@media (max-width: 47em) { 
    #container { 
    display: block; 
    } 
} 

div#container { 
    display:none; 
}

к этому:

#container { 
    display:none; 
} 

@media (max-width: 47em) { 
    #container { 
    display: block; 
    } 
}

Codepen Demo

источник

2015-11-03 16:32:48

Имея немотивированный день? Я привык находить ваш ответ, объясняя проблемы и решение в деталях :) – connexo

Я делал демонстрацию и размещал, тогда я видел, что вы уже сделали это. Поэтому я оставил его и дал вам +1. :) ... и да, я сегодня из-за близких голосов ... сегодня толстая толща. –

Если поменять местами вокруг медиа-запроса с общим CSS, и добавить важный тег это сортирует ваши номер примера:

#container { 
    display:none; 
} 

@media (max-width: 47em) { 
    #container { 
    display: block; 
    } 
}

Проверьте этот код: http://codepen.io/sshhdaniella/pen/EVppwR

источник

2015-11-03 16:35:26 sshhDaniella

Использование '! Important;' почти * никогда * желательно, и в этом случае также совершенно ненужно. И даже если использовать '! Important;' было бы единственным решением здесь, это сделало бы переключение ненужным. – connexo

На втором взгляде вы правы, использование важных было ненужным, использование четких селекторов и упорядочение - вот здесь проблема. – sshhDaniella

Медиа-запрос - как сделать div-дисплей на максимальной ширине, когда он изначально не отображается

ответ

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