Ширина медиа-запроса не соблюдается - PullRequest
Новая
       0

Ширина медиа-запроса не соблюдается

2 голосов
/ 20 октября 2011

В настоящее время у меня есть нижний колонтитул с 3 разделами, расположенными следующим образом: 

.foot1, .foot2, .foot3 { width: 33%; float: left; }
.foot2 { margin: 0 0.5%; }

Я хочу, чтобы они изменили макет на 768px и 480px.В 768px у меня есть следующее (чтобы сложить первый сверху, с # 2 & 3, разделяющими пространство под ним): 

.foot1 { width: 98%; float: none; margin: 0 1%; }
.foot2, .foot3 { width: 48%; margin: 0 1%; }

В 480px (чтобы все 3 стека и занимали ширину) У меня есть: 

.foot2, .foot3 { width: 98%; float: none; }

Моя проблема в том, что при 480px и ниже ширина не соблюдается и остается на уровне 48%.Если я использую «проверять» в Chrome, я вижу, что «плавать: нет;»отслеживается, но не ширина из медиа-запроса.

Кто-нибудь знает, почему он выбрал бы признание объявления с плавающей точкой, но не ширину: 98%?

Спасибо!

1 Ответ

1 голос
/ 27 марта 2012

Я попытался воспроизвести проблему, с которой вы столкнулись, но не смог.

Я считаю, что мой тестовый код ниже работает так, как вы хотите. Чем ваш код отличается от приведенного ниже html / css? 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    .foot1 { background: tan }
    .foot2 { background: green }
    .foot3 { background: blue }
    .foot1, .foot2, .foot3 { width: 33%; float: left; }
    .foot2 { margin: 0 0.5%; }
    @media screen and (max-width: 768px) {
      .foot1 { width: 98%; float: none; margin: 0 1%; }
      .foot2, .foot3 { width: 48%; margin: 0 1%; }
    }
    @media screen and (max-width: 400px) {
      .foot2, .foot3 { width: 98%; float: none; }
    }
  </style>
</head>
<body>
<div class="foot1">foot1</div><div class="foot2">foot2</div><div class="foot3">foot3</div>
</body>
</html>
...