Почему мой адаптивный CSS не использует ширину носителя?

Как следует из названия, я не могу установить CSS, зависящий от ширины экрана мультимедиа, для моей веб-страницы PHP.

Вот мой <head> раздел моего index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title><?php echo SITENAME; ?> - <?php echo SITEDESC; ?></title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0; minimumscale=1.0, maximum-scale=1.0; user-scalable=0;" /> <!-- for responsive coding, the "Viewport" meta tag -->

    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type='text/javascript' src='scripts/respond.min.js'></script> <!-- for responsive mobile themes -->

    <link type="text/css" rel="stylesheet" href="style.css"/>        
        
</head>

Для моего HTML-элемента <header> ... </header> в моем CSS (в style.css) я указал:

header{
    background: #1e5799;
    min-height: 40px;
    max-height: 136px;
}

Но использование Изменить размер » Просмотр адаптивных макетов на панели инструментов веб-разработчика показывает некоторое падение в макетах устройств разной ширины.

Например:
В моем теге <header> внутренние элементы выходят наружу, поэтому мне нужно увеличить высоту заголовка. Поэтому я указал в style.css:

/* Media Queries for Different Types of Mobile Devices */

/* Mobile portrait (320 x 480) */

@media all and (max-device-width: 320px) {

    header{
        height: 136px !important;
        background-color: #FF0000;
    }

}

Но это не работает. :(

Чего мне не хватает в адаптивном CSS?

РЕДАКТИРОВАТЬ

После первых двух ответов с их предложениями я попытался использовать:

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

    header{
        height: 136px !important;
        background-color: #FF0000;
    }

}

И да, я поместил свой медиа CSS внизу style.css.

Я также попытался разделить mobile.css как:

<link type="text/css" rel="stylesheet" media="screen and (max-device-width: 480px)" href="css/mobile.css" />

Где я пытался разместить следующий код:

header{
    height: 130px;
}

Тем не менее это не работает.


css responsive-design device-width
person Mayeenul Islam    schedule 14.09.2013    source источник

Ответы (3)


arrow_upward
3
arrow_downward

При разработке max-device-width не поможет вы визуализируете изменения при изменении размера окна, потому что этот конкретный медиа-запрос нацелен на фактический размер устройства (которым на вашем компьютере будет ваш монитор, а не окно браузера).

С другой стороны, max-width предназначен для браузера. ширина окна, поэтому отлично работает при изменении размера.

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

person NinGen ShinRa    schedule 14.09.2013
comment
Большое спасибо. Но я проверил и с помощью @media screen and (max-width: 320px). Это все еще не работает. - person Mayeenul Islam; 14.09.2013
comment
Есть ли ваш веб-сайт в сети, где я могу его проверить? Если нет, не могли бы вы создать SSCCE (т. е. минимальный рабочий пример)? - person NinGen ShinRa; 14.09.2013
comment
@MayeenulIslam Вы используете очень маленькое значение ширины, для вашего макета, как сейчас, вам нужно минимум 800 пикселей. - person Sam Pettersson; 14.09.2013
comment
для вашего макета в том виде, в каком он есть сейчас, вам нужно минимум 800 пикселей - Как вы это говорите? Да, я видел, что его лучше всего просматривать при минимальной ширине 800 пикселей. Но с помощью колеса мыши я могу сжать весь сайт даже до 320 пикселей. Я хочу, чтобы заголовок был исправлен на ширину 320 пикселей. Это невозможно? - person Mayeenul Islam; 14.09.2013
comment
@MayeenulIslam Я использовал инспектор в Chrome, отрегулировал окно и обнаружил, что макет ломается примерно на 800 пикселей? А колесико мышки? - person Sam Pettersson; 14.09.2013
comment
Да, ломается. Но если я получу медиа-ширину прямо в моем CSS, я могу изменить их порядок или повторно разместить их в другом представлении для ширины мини-устройства. Но вопрос и фактическая проблема заключались в том, что CSS, специфичный для ширины носителя, не учитывает макет. - person Mayeenul Islam; 14.09.2013
comment
@MayeenulIslam Просто напишите один носитель с максимальной шириной 800, а другой с максимальной шириной 320, на 800 вы устанавливаете высоту, а на 320 вы затем устанавливаете его в фиксированное положение? - person Sam Pettersson; 14.09.2013

arrow_upward
2
arrow_downward

Проверьте http://codepen.io/anon/pen/iFCHj, я обычно max-width вместо max-device-width как вы получаете адаптивный макет на всех устройствах.

Кроме того, убедитесь, что ваш адаптивный макет находится под основным макетом, иначе браузер будет игнорировать медиаданные, если для всех не установлено значение !important.

person Sam Pettersson    schedule 14.09.2013
comment
Большое спасибо. Но я проверил и с помощью @media screen and (max-width: 320px). Это все еще не работает. - person Mayeenul Islam; 14.09.2013

arrow_upward
1
arrow_downward

В дополнение к другим хорошим предложениям, если вы проверите стиль для полного заголовка, который у вас есть

header{
background: #1e5799; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzU0NzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #1e5799 0%, #135471 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#135471)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1e5799 0%,#135471 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1e5799 0%,#135471 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1e5799 0%,#135471 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #1e5799 0%,#135471 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#135471',GradientType=0 ); /* IE6-8 */

/*border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    -o-border-radius: 8px 8px 0 0;
 */
min-height: 40px;
max-height: 136px;
}

Таким образом, для области просмотра 320 пикселей, в дополнение к написанию новых стилей для высоты и цвета фона, вам необходимо переопределить фоновое изображение и фильтр IE.

Чтобы удалить фильтр IE, что-то вроде

filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);

должно быть хорошо. Вероятно, вы можете определить фоновый градиент.

Удачи!

person David Taiaroa    schedule 14.09.2013