@media запрос выглядит нормально, но не работает

ли простой тест @media запросов, чтобы увидеть, что работает: http://www.casedasole.it/km2014/test.html @media запрос выглядит нормально, но не работает

В test.css есть @media запрос, который должен - если я понял СМИ запросы - измените цвет фона с черного на красный на альбомных планшетах (1024x768). Css проверяет, проверяет xhtml, но фон остается черным в FF, используя расширение веб-разработчика Chris Pederick -> View Responsive Layouts, а также в эмуляторе iPad для iPad (у меня нет iPad).

Если кто-нибудь может объяснить, почему он не работает, я уверен, что буду получать удовольствие от медиа-запросов.

источник

2014-01-06 plugincontainer

Вы в начале документа , Это, наверное, бесполезно. Вы должны удалить его. Кроме того, рассмотрите возможность размещения HTML-документа. –

Я удалил его, проверил его снова, но ничего не изменилось. Объявление документа , Потому что это то, что я видел, указано как необходимое для веб-сайтов для мобильных телефонов. – plugincontainer

У вас есть два объявления, кстати, ни один из них не является документом HTML5. Я считаю, что доктрины HTML5 - это путь для мобильных сайтов. –

Прежде всего, это лучшие точки останова

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ } 
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or  @ 640 wide. */ } 
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ } 
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } 
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } 
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Теперь в вашем случае использовать этот носитель запрос вместо

@media (max-width:1024px) { 
html, body { 
    background-color: #f00; 
    color:#000; 
    } 
}

источник

2014-01-06 23:16:36

ах, да. Использование «@media (max-width: 1024px)» вместо «экрана @media и (max-device-width: 1024px)» изменило все. Первое, что я заметил, - это фон, измененный на красный в каждом адаптивном макете от мобильного портрета (320x480) до ландшафта планшета (1024x768). Вот когда он щелкнул - то, что я тестировал, меняло стили для таблеток шириной 1024 px. Итак, используя красный фон в качестве примера, я должен был использовать «@media (min-width: 1024px)», который меняет фон на красный только на 1024 пикселей. Оно работает. – plugincontainer

Я думаю, вам нужно ';' after' color: # 000' (make color: # 000; ') – Joe

@Joe Спасибо. Отредактировано –

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

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <style type="text/css"> 
     html, body { 
      height: 100%; 
      font-size: 12px; 
      text-align: left; 
      margin: 0; 
      padding: 5px; 
      background-color: #000; 
      font-family: verdana,arial,geneva,helvetica,sans-serif; 
      color: #fff; 
      text-align: center; 
     } 
     /* iPad and other tablets (landscape) */ 
     @media screen and (max-width: 1024px) { 
      html, body { 
       background-color: #f00; 
       color: #000; 
      } 
     } 
    </style> 
</head> 
<body> 
    <h1>Why is background not red in iPad landscape 1024px??</h1> 
</body> 
</html>

источник

2014-01-06 23:17:06

Спасибо. Пожалуйста, см. Ответ на Vim Bonsu выше. – plugincontainer

Кроме того, кажется, работает, если вы используете "@media только экран и (макс-ширина: 1024px)"

источник

2014-01-06 23:17:59 Endanke

@media запрос выглядит нормально, но не работает

ответ

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