Медиа-запросы влияют на определенные элементы, а не на другие

Question

Медиа-запросы влияют на определенные элементы, а не на другие

0

Я использую медиа-запросы для редактирования некоторых элементов веб-сайта для мобильного использования. Я знаю, что определенная таблица стилей со средой работает, однако отдельные элементы, похоже, не редактируются. Кто-нибудь знает, почему это произойдет? Я вставил тег начала стиля и обе версии этого элемента.

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

#home-content { /* small device stylesheet */
    position:absolute; width:700px;
    bottom:165px; left:0%; padding:35px 45px 35px 45px;
    background:url(/img/content-background.png) repeat;
}

#home-content { /* regular stylesheet */
    position:absolute; width:30%;
    bottom:65px; left:0%; padding:35px 45px 35px 45px;
    background:url(/img/content-background.png) repeat;
}

Любая помощь будет замечательной! Спасибо, парни.

Liam David Hodnett 04 янв. 2014, в 15:57

Источник

1

Можем ли мы увидеть случай использования, где это не работает?
Alexander O'Mara 04 янв. 2014, в 14:33
0

предпочитайте max-width вместо max-device-width по причинам, указанным здесь .
Michał Rybak 04 янв. 2014, в 14:33
0

Вы загружаете специфичные для мобильных устройств CSS после обычной таблицы стилей?
Raunak Kathuria 04 янв. 2014, в 14:36
0

@AlexanderO'Mara AlexanderO'Mara chefpaulcrowe.com Я хочу, чтобы текстовое поле в левом нижнем углу экрана занимало большую часть экрана на мобильных устройствах, однако элемент как бы игнорирует таблицу стилей, специфичную для медиа.
Liam David Hodnett 04 янв. 2014, в 14:37
0

@RaunakKathuria Если вы имеете в виду, что тег стиля для мобильного телефона стоит перед тегом обычного стиля в моем заголовке, то нет, это не так, он указан после. Спасибо за помощь, ребята, очень ценю это.
Liam David Hodnett 04 янв. 2014, в 14:39
0

@MichałRybak MichałRybak - это не только ширина, на которую не влияет таблица стилей для конкретного носителя, это положение, цвета фона и т. Д.
Liam David Hodnett 04 янв. 2014, в 14:50

Показать ещё 4 комментария

Теги:

html

css

media-queries

1 ответ

Ещё вопросы

Можем ли мы увидеть случай использования, где это не работает?
предпочитайте max-width вместо max-device-width по причинам, указанным здесь .
Вы загружаете специфичные для мобильных устройств CSS после обычной таблицы стилей?
@AlexanderO'Mara AlexanderO'Mara chefpaulcrowe.com Я хочу, чтобы текстовое поле в левом нижнем углу экрана занимало большую часть экрана на мобильных устройствах, однако элемент как бы игнорирует таблицу стилей, специфичную для медиа.
@RaunakKathuria Если вы имеете в виду, что тег стиля для мобильного телефона стоит перед тегом обычного стиля в моем заголовке, то нет, это не так, он указан после. Спасибо за помощь, ребята, очень ценю это.
@MichałRybak MichałRybak - это не только ширина, на которую не влияет таблица стилей для конкретного носителя, это положение, цвета фона и т. Д.

Alexander O'Mara · Accepted Answer · 2014-01-04T12-38-00.000Z

Это порядок таблиц стилей в заголовке вашего документа:

<link rel="stylesheet" href="/small-devices.css" media="only screen and (max-device-width: 1000px)" type="text/css" />
<link rel="stylesheet" href="/wp-content/themes/twentythirteen/style.css" type="text/css">
<link rel='stylesheet' id='genericons-css'  href='http://chefpaulcrowe.com/wp-content/themes/twentythirteen/fonts/genericons.css?ver=2.09' type='text/css' media='all' />
<link rel='stylesheet' id='twentythirteen-style-css'  href='http://chefpaulcrowe.com/wp-content/themes/twentythirteen/style.css?ver=2013-07-18' type='text/css' media='all' />

Это приведет к тому, что small-device.css будет отменено любыми правилами равной или большей специфичности. Вы должны перемещать small-devices.css, чтобы печатать ниже в заголовке, или увеличивать специфичность селекторов. Например:

body #home-content { /*Some CSS*/ }

Будет отменено:

#home-content { /*Some CSS*/ }

Независимо от порядка.

Кроме того, в вашем живом примере у вас нет ширины, установленной на # home-content.

В small-devices.css(http://chefpaulcrowe.com/small-devices.css) у вас есть этот код.

#home-content {
    position:absolute; max-device-width:700px;
    bottom:165px; left:0%; padding:35px 45px 35px 45px;
    background:red;
}

Это свойство:

max-device-width:700px;

Должно быть что-то вроде:

width:700px;

Спасибо за вашу помощь! Однако это не только ширина, которая не зависит от конкретной таблицы стилей для мобильных устройств, это фактически все команды, то есть цвет фона, положение, высота, ширина ширины и т. Д., Есть идеи о том, что может быть причиной этого?
Я вижу, я отредактировал свой ответ с полным решением.
Работает как шарм! Спасибо! Я действительно ценю это @ Александр О'Мара