2016-12-23 3 views
0

я медиазапросы работы отлично на второй HTML-страницу с этим кодомПроблемы с запросами СМИ, ничего не происходит

@media only screen and (min-device-width: 200px) and (max-device-width: 1099px) { 
.snebild img {width: 50%; max-width: 50%; right: 2%;} 
.title {margin-left: 4%; position: absolute; top: 10%;} 
} 

Но на моей второй странице им пытаются изменить размер шрифта, так это выглядит хорошо на низких разрешениях, но используя тот же код, который просто меняется на правильный класс и элемент p, но ничего не работает.

@media only screen and (min-device-width: 200px) and (max-device-width: 1099px) { 
.introus p {font-size: 8px;} 
} 

Это HTML-

<div class="introus"> 
      <h2>Main Title</h2> 

      <h4>Second title</h4> 

      <p>Text to change size on when using lower resolution such as Iphones.</p> 
     </div> 
+0

Что с помощью второй страницы.? – Riddler

+0

Все остальные равны, нет причин, по которым второй блок кода не будет работать, когда первый сделает, так что либо: (1) У вас есть другой CSS, который мешает, но не появляется в вопросе, или (2) Вы устанавливают минимальный размер шрифта. – Quentin

+0

Что вы подразумеваете под «моей второй страницей»? Эта страница использует другой лист CSS? Вы также выбираете страницу в CSS, чтобы ссылаться на второе правило СМИ, о котором вы говорили? Кроме того, используйте (max-width: #px) 'вместо' (max-device-width: #px) '- объяснение здесь> http://stackoverflow.com/questions/18500836/should-i-use-max- device-width-or-max-width –

ответ

-1

Я предполагаю, что вы проверяете его на настольном устройстве, а не на мобильном устройстве. Попробуйте изменить min-device-width на номер min-width, который должен работать.

Исправьте меня, если я ошибаюсь.

+0

Уже пробовал, что перед публикацией здесь изменение на min-width не работает. – Peterssoen

-1

Вы должны использовать min-width вместо min-device-width, потому что основное различие между шириной и шириной устройства заключается в том, что ширина устройства не всегда соответствует виду видового экрана устройства.

Изменение параметров, что код работает отлично

@media only screen and (min-width: 200px) and (max-width: 1099px) { 
 
.introus p {font-size: 8px;} 
 
}
<div class="introus"> 
 
      <h2>Main Title</h2> 
 

 
      <h4>Second title</h4> 
 

 
      <p>Text to change size on when using lower resolution such as Iphones.</p> 
 
     </div>

+0

OP заявила, что те же правила медиа-запросов отлично работают на другой странице. – Quentin

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