CSS-запросы СМИ не работают нигде

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

Я попытался загрузки файла CSS

<link rel="stylesheet" href="css/medium-main.css" type="text/css" media="screen and (max-width: 800px)" />

в мета-тег, и я также попытался с помощью

@media (min-width: 401px) and (max-width: 800px) { 
.page{max-width:730px; margin:0 auto; display: block; height:850px; float:left; } 
    }

в главном файле CSS, но не происходит никаких изменений.

Это как мой заголовок выглядит следующим образом:

<link rel="stylesheet" href="css/bootstrap.css"> 
    <link rel="stylesheet" href="css/image-slides.css" type="text/css"> 
    <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" type="text/css" /> 
    <link rel="stylesheet" href="css/main.css" type="text/css" /> 
    <link rel="stylesheet" href="css/medium-main.css" type="text/css" media="screen and (max-width: 800px)" />

Свойство CSS, что я пытаюсь изменить это ширина DIV с помощью простой в и поэтому, когда я изменить размер браузер ничего не происходит.

Что не так с моим кодом?

источник

2013-08-27 dll_onFire

Вы можете воспроизвести это с jsfiddle.com или jsbin.com? – Znarkus

нет. извините за это –

, в каком браузере вы это пытаетесь? также, когда вы проверяете страницу div, ваши стили становятся переопределенными или вообще не отображаются. – Huangism

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

<link rel='stylesheet' media='screen and (max-width: 700px)' href='stylesheets/narrow.css' /> 
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='stylesheets/medium.css' /> 
<link rel='stylesheet' media='screen and (min-width: 901px)' href='stylesheets/wide.css' />

источник

2013-08-27 16:33:22

Ваш HTML правильно установить так:

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Title</title> 
</head> 
<body> 
    //stuff 
</body> 
</html>

Использование:

@media screen and (min-width: 401px) and (max-width: 800px) { … }

Вместо:

@media (min-width: 401px) and (max-width: 800px) { … }

источник

2013-08-27 16:32:48

все еще не работает в firefox. –

Мне неловко, сколько раз мне приходилось в Google это только для того, чтобы помнить, что я пропускаю свой «' tag ... – armadadrive

попробовать это

@media all and (min-width: 401px) and (max-width: 800px) { 
    /*your code here*/ 
}

источник

2013-08-27 17:10:17

-1

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

Here пример. Это отзывчивый дизайн.

источник

2013-08-28 08:40:55

Я думаю, что это способ заказа кода.

Оригинальный код CSS должен быть помещен первым, затем другой экран с @media упорядоченный по размеру:

...original CSS code... 

@media(max-width:300px) {...} 

@media(max-width:533px) {...} 

@media(max-width:640px) {...}

источник

2015-07-11 13:54:17

CSS-запросы СМИ не работают нигде

ответ

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