Медиа-запрос теряется в Firefox при изменении размера окна до максимальной ширины минус ширина полосы прокрутки

Это моя первая попытка адаптивного дизайна сайта, и я столкнулся со странной проблемой, когда медиазапросы теряются при определенной ширине окна в Firefox 32 для Windows 7 (так или иначе).

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

Например, максимальная ширина 768px - это одна точка останова, а когда размер окна изменяется до 767px, он должен загрузить новый медиа-запрос. В этом случае следующий вниз имеет макет шириной 600 пикселей.

Однако в Firefox 32 в Windows 7 новый медиазапрос не загружается, если я могу сделать окно браузера размером примерно 767,4 пикселя.

Когда я проверяю код, вычисляемый HTML показывает ширину с десятичным значением. Это не похоже на другие мои браузеры, которые, кажется, округляют до целых чисел.

Я попытался изменить значения в моих стилях и медиа-запросах HTML, которые используют значения ems, rems или px. Некоторые изменения привели к тому, что в других браузерах возникают похожие проблемы между точками останова. Я обнаружил, что использование ширины в пикселях дает наилучшие результаты, но не решает проблему FF32.

Вот код страницы PHP:

<!doctype html>
<html lang="en">
<head>
<title>This is the title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
<meta name="description" content="This is the description.">
<link rel="shortcut icon" href="favicon.ico">
<link rel="image_src" href="http://www.website.ca/image.gif">
<link rel="stylesheet" href="styles/styles-base.css">
<link rel="stylesheet" href="styles/styles-320.css" media="only screen and (min-width: 0px) and (max-width: 479px)">
<link rel="stylesheet" href="styles/styles-480.css" media="only screen and (min-width: 480px) and (max-width: 599px)">
<link rel="stylesheet" href="styles/styles-600.css" media="only screen and (min-width: 600px) and (max-width: 767px)">
<link rel="stylesheet" href="styles/styles-768.css" media="only screen and (min-width: 768px) and (max-width: 959px)">
<link rel="stylesheet" href="styles/styles-960.css" media="only screen and (min-width: 960px) and (max-width: 1223px)">
<link rel="stylesheet" href="styles/styles-1224.css" media="only screen and (min-width: 1224px)">
<link rel="stylesheet" href="webfonts/ss-standard.css">
<?php include("includes/head_typekit.php")?>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="scripts/mobilenav.js"></script>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

<body id="page-overview">
    <div id="wrapper">

Вот связанные стили по умолчанию из styles-base.css:

body {
    background-color: #eaf6f8;
    font-family: "ff-meta-web-pro", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    width: 100%;
}

/* . . . */

#wrapper {
    background-color: #fff;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

Вот пример из одной из таблиц стилей, которые следуют этому подходу:

#wrapper {
    width: 1224px;
}

Любые предложения о том, как решить эту проблему или улучшить мой код, если это требует какого-либо исправления?

Источник

2 ответа

Это не ошибка, это особенность.

Firefox интерпретирует значения мультимедиа на уровне субпикселя, например, не как целочисленное значение, а как значение с плавающей запятой. Следовательно, между минимальной шириной X и максимальной шириной X+1 существует разрыв в 1px, где определение не применимо. Кажется нелогичным, что можно установить размер области просмотра на уровне субпикселя, но подумайте об эффекте увеличения, когда значение пикселя умножается на данный коэффициент.

Поскольку селектор мультимедиа не предоставляет операторов ">" или "<", необходимо установить максимальную ширину X+0,01 вместо X+1. Хотя этот обходной путь оставляет разрыв в 0,01 пикселя, можно разумно предположить, что он никогда не появится.

Конечно, вы также можете использовать X+0,000001... если это дает вам душевное спокойствие;-)

Источник

Как сообщают различные ресурсы (например, OP), Firefox может не применять медиа-запросы с промежутком в 1 пиксель из-за субпиксельного рендеринга.

Кроме того, используя десятичные знаки (например,767.9px) может привести к неожиданным или иным раздражающим результатам из-за округления.

Однако есть некоторые улучшения синтаксиса на уровне 4, где мы можем использовать синтаксис Media Queries Range (см. спецификацию ):

      @media (min-width: 30rem) and (max-width: 50rem) { /*…*/ }
/* ↑ is equivalent in level 4 to ↓ */
@media (30rem <= width <= 50rem ) { /*…*/ }

… и в случае использования OP:

      @media (480px <= width < 600px) { /* use 480.css */ }
@media (600px <= width < 768px) { /* use 600.css */ }
@media (768px <= width < 960px) { /* use 768.css */ }

Очевидным преимуществом, кроме устранения проблем с округлением, является меньший объем кода при использовании обычных математических операторов сравнения — и не более n −1.

Источник
Другие вопросы по тегам