Уменьшение размера браузера вызывает проблемы с дизайном

Question

При масштабировании в Firefox (и большинстве других браузеров) разворачивается макет правой боковой панели и верхнего меню. Боковая панель переходит к нижней части страницы. Чтобы воспроизвести эту проблему, пожалуйста visit the site и:

1. Найти Zoom Out под меню просмотра браузера и нажмите на него несколько раз.
2. Обратите внимание, как это влияет на меню и боковую панель.

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

Несомненно, должно быть лучшее решение этой проблемы. Вы знаете?

Answer 1

В верхнем меню, вы можете попробовать установить div оберточной два ul «с до position:relative, а затем установить ul#mega элемент position:absolute с дополнительным CSS декларации right:0. Абсолютное позиционирование, по-видимому, является хорошим кросс-браузерным способом решения таких проблем.

Для боковой панели вы можете установить position:absolute и right:0 - div#sidebar.

процесс мысли 1 для выпуска Safari:

Если «больше» ширина меню отличается в верхнем меню, попробуйте установить ul#secondary-menu в position:relative;z-index:11;. Затем вы можете добавить padding-left к дочернему элементу li.mmoreul#mega, чтобы компенсировать различные оценки ширины браузера при разных масштабах, подметая li под другим li, так сказать. Затем, чтобы расширить цветную линию, передайте border-bottom объявления от a ребенка от li.mmore до li.mmore и отрегулируйте высоту соответственно.

Answer 2

AFAIK, настольные браузеры не используют подпиксельное разрешение для макетов (в настоящее время в WebKit реализована реализация, но нет слов в других браузерах). Вот почему вы не можете использовать фракции пикселя при калибровке в CSS. Масштабирование масштабирует только свойства CSS с помощью общего коэффициента масштабирования и округляет оставшуюся часть (я предполагаю, что он заполняет значения), так что механизм компоновки может работать с целыми числами вместо чисел с плавающей запятой.

Нет никакого твердого решения для этого, кроме попытки выбрать значения пикселей, которые равномерно распределяют между уровнями масштабирования. Другим подходом было бы использование определения ширины на основе процентных ставок для контейнеров. Таким образом, браузер округляет цифры правильно для вас, и если общая ширина обоих контейнеров никогда не превышает 100% (вам может потребоваться вычесть десятую или hundreth процента из-за округления), вы должны быть хорошо, чтобы перейти на все уровни масштабирования.

Это не следует путать с масштабированием CSS3, что позволяет вам произвольно масштабироваться (и может привести к появлению краев, которые не соответствуют пикселям экрана), поскольку это никак не влияет на компоновку.

EDIT: Пример: размер столбцов, используя проценты

#left-area { width: 66.3179%; /* 634/956 */ } 
#right-area { width: 33.6820%; /* 322/956 */ } 

Answer 3

При изменении размера браузера значения пикселей обязательно округлены, и это приводит к проблеме, где sidebar и left-area нет достаточно места, чтобы соответствовать бок о бок, и вы можете видеть, что оно падает до нижней части страницы.

Ширина main-content составляет 956px, left-area: 634px, sidebar: 322px.

634 + 322 = 956.

При увеличении масштаба, значения

633 + 321 = 954> 953

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