СМИ запросы не применяются

Question

Это мой CSS media query

@media screen and (max-width: 450px) { 
    .box_url { 
     font-size: 12pt; 
    } 
    .box_heading { 
     font-size: 13pt; 
    } 
    .right { 
    text-align: left; 
    } 
    .jane { 
    font-size: 10pt; 
    } 
    .ninja { 
    font-size: 12pt; 
    } 
} 

и мой нормальный CSS

.right { 
    text-align: right; 
} 
.jane { 
    width: 100%; 
    font-size: 70pt; 
} 
.ninja { 
    width: 100%; 
    font-size: 25pt; 
} 

Но когда я запускаю сайт некоторые из запросов СМИ не применяются.

Когда я открываю инструменты dev в chrome, это показывает, что медиа-запросы переопределяются.

Я попытался с помощью min-width тоже, но он по-прежнему не применять эти стили. Почему это происходит и как это исправить?

Answer 1

CSS стоит каскадных таблиц стилей, так что вы должны поставить медиа-запрос после того, как ваш стандартный CSS

так:

.right { 
    text-align: right; 
} 
.jane { 
    width: 100%; 
    font-size: 70pt; 
} 
.ninja { 
    width: 100%; 
    font-size: 25pt; 
} 
@media screen and (max-width: 450px) { 
    .box_url { 
    font-size: 12pt; 
    } 
    .box_heading { 
    font-size: 13pt; 
    } 
    .right { 
    text-align: left; 
    } 
    .jane { 
    font-size: 10pt; 
    } 
    .ninja { 
    font-size: 12pt; 
    } 
} 

Или, если вы хотите сохранить запрос СМИ в первую тогда вам нужно более конкретное в ваших селекторах CSS.

что-то вроде этого:

@media screen and (max-width: 450px) { 
    .flex .box_url { 
    font-size: 12pt; 
    } 
    .flex .box_heading { 
    font-size: 13pt; 
    } 
    .flex .right { 
    text-align: left; 
    } 
    .flex .jane { 
    font-size: 10pt; 
    } 
    .flex .ninja { 
    font-size: 12pt; 
    } 
} 
.right { 
    text-align: right; 
} 
.jane { 
    width: 100%; 
    font-size: 70pt; 
} 
.ninja { 
    width: 100%; 
    font-size: 25pt; 
} 

Answer 2

Порядок importancy на CSS как это следующим образом:

1 - Single Декларация

body { 
    background: red; 
} 

2 - Любое заявление, ниже первого

body { 
    background-color: red; 
} 

body { 
    background-color: blue; /* (This will be applied) */ 
} 

/* I'm overwriting my background, so it should be blue now */ 

Положение на заголовок также повлияет.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<link rel="stylesheet" href="style.css"> 

Моя style.css вы перезаписать что-нибудь на файл bootstripe, в этом примере, но увидеть следующую тему для исключения

3 - Более конкретные заявления

.container button.awesome-button { 
    font-size: 14px; /* (This will be applied) */ 
} 

.awesome-button{ 
    font-size: 10px; 
} 

С первого объявления является очень конкретным, это будет рассмотрено. . Это как говорить: «Эй, любой .awesome-button должен быть 10px, а затем указывая«Любой button, что под .container и имеет класс .awesome-button должен быть 14px Таким образом, ваш CSS должен соблюдать самые конкретные и точные координаты

4 -. CSS как атрибут

<style> 
    .blue{ 
    color:blue; 
    } 
</style> 

<div class="blue" style="color: red">The color of this div will be red, no matter the class</div> 

Styling непосредственно на HTML получит приоритет над чем на листе стиля

5 -. элементы с !important (а затем на конкретную вещь, если есть больше !important элементов)

.awesome-button { 
    font-size: 14px !important; /* (This will be applied) */ 
} 

.awesome-button{ 
    font-size: 10px; 
} 

Все, что с !important есть arhm ... более важно, так что вы CSS поймете, что. Однако, если существует более !important правил, другие правила будут применяться в важных элементах.

Будьте осторожны: Использование !important следует использовать аккуратно и в качестве последнего ресурса в некоторых случаях.

---

Таким образом, в вашем случае, просто поставить все ваши медиа-запросы после того, как «нормальный» CSS, как это:

.right { 
    text-align: right; 
} 
.jane { 
    width: 100%; 
    font-size: 70pt; 
} 
.ninja { 
    width: 100%; 
    font-size: 25pt; 
} 
@media screen and (max-width: 450px) { 
    .box_url { 
    font-size: 12pt; 
    } 
    .box_heading { 
    font-size: 13pt; 
    } 
    .right { 
    text-align: left; 
    } 
    .jane { 
    font-size: 10pt; 
    } 
    .ninja { 
    font-size: 12pt; 
    } 
} 

Answer 3

Проще говоря: как правило, внутри запроса средств массовой информации и «нормального» правила применяются здесь, так что «нормальное» правило применяется из-за каскада.

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

В вашем случае вы можете изменить порядок правил в своем CSS, или вы можете инвертировать логику, сделав свой мобильный случай стандартным представлением (сначала мобильным!) И используя что-то вроде медиа-запроса min-width, чтобы изменить, как ваш текст ведет себя на больших экранах.

Answer 4

Например:

@media (max-width: 450px){ 
    .box_url { 
    font-size: 12pt; 
    } 
    .box_heading { 
    font-size: 13pt; 
    } 
    .right { 
    text-align: left; 
    } 
    .jane { 
    font-size: 10pt; 
    } 
    .ninja { 
    font-size: 12pt; 
    } 
} 

Надеется, что это работает для вас.

Answer 5

сделать объявления вашего медиа-запроса следуют тому же порядку, что и ваши оригинальные объявления css. Например, чтобы сделать свою работу СМИ CSS я бы написать

HTML

<div id="box-A"> 
    <div id="box-B"></div> 
</div> 

CSS

#box-A #box-B { 
    height: 100px; 
} 

MEDIA CSS

@media screen and (max-width: 480px) { 
    /*This won't work*/ 
    #box-B { 
     height: 50px; 
    } 
    /*This will work*/ 
    #box-A #box-B { 
     height: 50px; 
    } 
} 

Надеется, что это устраняет проблему.