2015-11-17 3 views
0

Так что мне пришлось исправить ошибку в проекте, построенном на фундаменте, и когда я наконец понял, что вызвало это, мне стало интересно.погрешность запросов в области медиаданных

Ошибка появлялась betwen 1024px и 1027px width - навигация переходила бы от мобильного состояния к рабочему столу, но некоторые элементы по-прежнему оставались бы как в мобильной версии.

В _settings.scss фонда файл я нашел это:

//Media Query Ranges 
$small-range: (0em, 40em); 
$medium-range: (40.063em, 64em); 
$large-range: (64.063em, 90em); 
$xlarge-range: (90.063em, 120em); 
$xxlarge-range: (120.063em); 

Как вы можете видеть, что есть разрыв везде - например, запрос заканчивается в 64em, а следующий начинается только в 64.063em.

Таким образом, мобильный навигатор изменит состояние на рабочий стол на 64-м, что преобразует в ширину 1024 пикселя, но некоторые другие элементы появятся только с 64.063em, что примерно 1027px?

Я редактировал переменные и исправил их, но мне интересно, почему они это сделают?

+0

Все, что я мог подумать, это развратный браузер, вызывающий задержки, создатель этих диапазонов, вероятно, поместил один и тот же ** промежуток ** между всеми, чтобы он выглядел последовательным. Могут быть разные причины. Это просто сценарий, я точно не знаю. – SidOfc

+2

Единственные люди, которые могут ответить на этот вопрос, являются сторонниками Фонда. Ответ от кого-то другого был бы чисто спекуляцией. – cimmanon

ответ

1

Технически 64.063em должен быть 1025px почти во всех браузерах, если вы не изменили размер базового размера как-то. Вы отметите здесь от их документов, они включают в себя значение в комментариях (обрежетесь для удобства чтения):

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px */ 

@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */ 

Вы заметите, что они ссылаются на 1024px и 1025px. Существует вероятность того, что браузер может немного изменить это значение и вызвать расхождение. Я бы раскрыл вопрос о Github: https://github.com/zurb/foundation/issues

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