Чому мої медіа-запити CSS3 не працюють?

У styles.css я використовую медіа-запити, обидва з яких використовують варіант:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

Під час зменшення вікна веб-сайти змінюють розмір, який я хочу використовувати в звичайному браузері (Safari, Firefox), проте мобільний макет взагалі не відображається на телефоні. Натомість я просто бачу CSS за замовчуванням.

Чи може хтось вказати мені в правильному напрямку?

Усі три ці корисні поради, але, схоже, мені потрібно було додати метатег:

<meta content="width=device-width, initial-scale=1" name="viewport" />

Зараз, здається, працює і в Android (2.2), і в iPhone все добре ...

Не забувайте мати стандартні декларації css над медіа-запитом, або запит також не працюватиме.

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

Я підозрюю, що тут onlyможе виникнути ключове слово . У мене немає проблем із використанням медіа-запитів, таких як:

@media screen and (max-width: 480px) { }

Я використовував завантажувальний веб-сайт на веб-сайті для преси, але він не працював на IE8, я використовував css3-mediaqueries.js javascript, але все ще не працює. якщо ви хочете, щоб ваш медіа-запит працював із цим файлом javascript, додайте екран до рядка запиту медіа у css

ось приклад:

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

css Рядок посилань простий, як і вище.

Сьогодні у мене була подібна ситуація. Медіа-запит не працював. Через деякий час я знайшов, що місця після "і" не було. Правильний медіа-запит повинен виглядати так:

@media screen and (max-width: 1024px) {}

Порядковий порядок css-коду також має значення, наприклад:

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

вищевказаний код не працює, оскільки виконане замовлення. Необхідно написати так:

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}

Завжди вказуйте максимальну ширину і мінімальну ширину в деяких одиницях, таких як px або rem. Це зрозуміло для мене. Якщо я записую її без одиниці та лише цифрового значення, браузер не може читати медіа-запити. приклад: це неправильний екран лише для медіа та (макс. ширина: 950), і це правильно, лише екран @media та (max-width: 950px)

Кинувши ще одну відповідь на ринг. Якщо ви намагаєтеся використовувати змінні CSS, це спокійно вийде з ладу.

@media screen and (max-device-width: var(--breakpoint-small)) {}

Змінні CSS не працюють у медіа-запитах (за дизайном).

Дивна причина, яку я ніколи не бачив: Якщо ви використовуєте селектор "батьків> дитина" поза медіа-запитом (у Firefox 69), він може порушити медіа-запит. Я не впевнений, чому це відбувається, але для мого сценарію це не вийшло ...

@media whatever {
    #child { display: none; }
}

Але додавши батьківський параметр, щоб відповідати якомусь іншому CSS, надалі на сторінці, це працює ...

#parent > #child { display: none; }

Здається, що вказати батьків не має значення, оскільки ідентифікатор дуже специфічний і не має бути двозначності. Можливо, це помилка у Firefox?

У фрагменті коду OP чітко використовується правильна розмітка коментарів, але CSS може порушуватися прогресивно - тому, якщо є синтаксична помилка, все після цього, ймовірно, вийде з ладу. Кілька разів я покладався на надійні джерела, які надавали неправильну розмітку коментарів, що зламала мою таблицю стилів. Оскільки ОП надало лише невеликий розділ їх коду, я пропоную наступне:

Переконайтеся, що всі ваші коментарі CSS використовують цю розмітку /*... */- це правильна розмітка коментарів для css згідно MDN

Підтвердьте свій css за допомогою лайнера або захищеного онлайн-валідатора. Ось W3

Більше інформації: я пішов перевірити останні рекомендовані межі запиту межі запиту з завантажувального пристрою 4 і закінчив копіювати плиту котла прямо з їхніх документів. Майже кожен блок коду був позначений коментарями у стилі javascript// , які порушили мій код - і дали мені лише криптовані помилки компіляції, з якими можна усунути неполадки, які в той час перейшли через мою голову і викликали у мене смуток.

Текстовий редактор IntelliJ дозволив мені коментувати конкретні рядки css у файлі МЕНШЕ за допомогою ctrl + / гарячої клавіші, яка була чудовою, окрім вставки// за замовчуванням у нерозпізнані типи файлів . Це не безкоштовно, і менше - досить мейнстрім, тому я довіряв цьому і пішов з ним. Це зламало мій код. Існує меню переваг для викладання правильної розмітки коментарів для кожного типу файлів.

Включення метатега, як показано нижче, може призвести до того, що браузер по-різному обробляє масштаб зору перегляду.

<meta content="width=device-width, initial-scale=1" name="viewport" />

Я нещодавно зіткнувся з цим питанням, і пізніше я з’ясував, що це було через те, що я не поставив пробіл між andі (. Це була помилка

@media screen and(max-width:768px){
}

Потім я змінив це на це, щоб виправити

@media screen and (max-width:768px){
}

Я використовую кілька методів залежно. У тому самому аркуші стилів я використовую: @media (максимальна ширина: 450 пікселів), або окремо переконайтеся, що ви правильно маєте посилання в заголовку. Я переглянув ваше виправлення, і у вас є заплутаний масив посилань на css. Це діє, як ви говорите, також на бажання HTC S.

@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

Для мене я вказав max-heightзамість цього max-width.

Якщо це ти, перейди зміни!

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

Це також може статися, якщо рівень масштабування браузера не правильний. Масштаб вікна вашого браузера повинен бути 100%. У Chrome використовуйте Ctrl + 0для скидання рівня збільшення.