Как заставить firefox работать со средствами массовой информации?

Question

Я новичок в веб-дизайне и стараюсь сделать свой сайт удобным для ноутбука. Я решил использовать медиа-запросы, чтобы поднять разные таблицы стилей по мере изменения размеров окон. Это отлично работает с Chrome и IE, но Firefox использует таблицу стилей, которую я написал для ноутбуков, независимо от того, подтягиваю ли я ее на своем ноутбуке или моем мониторе 1080p.

Это мультимедийный запрос, который я использую в настоящее время.

<link rel="stylesheet" media="screen and (min-width:1200px) and (max-width:1600px)" href="styleslaptop.css" /> 

Я уже проверил все свои расширения, и ни одна из них не имеет значения.

Любая помощь была бы принята с благодарностью.

Answer 1

Измените ваш link на:

<link rel="stylesheet" href="styleslaptop.css"/> 

Затем откройте styleslaptop.css и в нижней части файла добавить следующее:

CSS

/* ----------- Non-Retina Screens ----------- */ 
@media screen 
    and (min-device-width: 1200px) 
    and (max-device-width: 1600px) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    PUT YOUR CSS RULE SETS THAT ARE EXCLUSIVELY FOR LAPTOPS HERE 
} 

/* ----------- Retina Screens ----------- */ 
@media screen 
    and (min-device-width: 1200px) 
    and (max-device-width: 1600px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (min-resolution: 192dpi) { 
    PUT YOUR CSS RULE SETS THAT ARE EXCLUSIVELY FOR LAPTOPS HERE 
} 

Я получил запросы СМИ из этой статьи: Media Queries for Standard Devices Лучший способ определить ваши контрольные точки - это дизайн не с помощью устройства, но если ваш сайт не такой сложный, то резак для печенья должен быть достаточным.

UPDATE

При проверке ваших 2 таблицы стилей я считаю, я знаю, почему ноутбук CSS не работает в Firefox. В конце обеих таблиц стилей используется редко используемое правило: @-moz-document url-prefix() {} Это правило предназначено для определенных страниц с помощью prefix(http://example.com/path/). Объяснение правила @document: here. Существуют две незначительные проблемы и одна из основных проблем:

1. Правило @document поддерживается только Firefox.
2. Если вы действительно хотите использовать это бесполезное правило, тогда вы должны поместить URL-адрес в скобку ex. @moz-document url-prefix(http://example.com/path)

Так прямо сейчас на рабочем столе CSS свойства и значения, которые находятся в этом наборе правил применяются ко всем страницам IF your'e с помощью Firefox. Теперь о главной проблеме.

На вашем ноутбуке CSS у вас отсутствует закрывающая скобка набора правил @document. Это объясняет, почему вы видите большую разницу в Firefox и почему медиа-запросы, которые я вам дал, не помогли. Чтобы исправить это, просто зайдите в самую нижнюю часть вашего ноутбука CSS и поместите }. Теперь вы должны увидеть Firefox, как вы ожидали, чтобы она выглядела, но имейте в виду, что есть некоторые дополнительные правила в dektop CSS:

#testimonialscontent h2 { 
      padding-top:0.25%; 
      padding-right:0; 
      font-size:1em; 
    } 

    body { 
      background-color:white; 
    } 

ДАЛЕЕ КОНСУЛЬТАЦИЯ

Это хорошо, что your'e взятие время, чтобы изучить эзотерические вещи, но имейте в виду, как другие разработчики тоже делают что-то.Существует множество бесполезных свойств и правил, которые слишком специфичны по назначению или сужают совместимость. Большинство, но не все из них имеют vendor prefixes -moz, -webkit и т. Д. Это в основном экспериментальные, частично поддерживаемые и/или ограниченные в некотором роде, поэтому помните Caveat emptor. Поэтому, когда вы хотите использовать что-то вы не видят очень часто используются или что-то с префиксами, перейдите по ссылке: http://caniuse.com/, поиск даст информацию, например, какие браузеры поддерживают свойство, элемент и т.д.

На таблицы стилей, следует попытаться использовать одну таблицу стилей, в которой есть все ваши пользовательские стили. Вы должны использовать свой рабочий стол CSS в качестве основных правил, затем поместить все новые правила (не все правила) у вас есть для ноутбука и положить их в нижней части основных правил (рабочий стол CSS), затем поместите их в медиа-запрос, как я изначально объяснил. Причина, по которой вам необходимо свести к минимуму количество внешних файлов (а не только .css, но .js), - это потому, что они несут дополнительные HTTP-запросы, см. Это: Seven Mistakes that Make Websites Slow.

Удачи вам, сэр. Если бы я помог, не забудьте нажать эту зеленую галочку, и если я действительно помог вам помочь, нажмите стрелку вверх. ;)

Answer 2

Положите медиазапросы внутри вашего файла CSS ..

Ссылка как этот <link rel="stylesheet" href="styleslaptop.css" />

И в вашем CSS обернуть все между

@media screen and (min-width:1200px) and (max-width:1600px) { /* your css here */ }