Процент смешивания и фиксированный CSS

Ответ 1

+1 Хороший вопрос. Вы можете взглянуть на эту статью: " Фиксированная, жидкая и эластичная макет" Она идет по схеме фиксированной ширины (em) и эластичные макеты (%), и если вы нажмете перейти на следующую страницу, то увидите "Гибридный эластик-жидкость" - где ширина: устанавливается в одну сторону, с максимальной шириной: устанавливает другую. Я знаю, что связанная с этим статья не совсем то, что вы просили, но это пример смешанного использования в рамках одного стиля CSS.

Изменить: После некоторого дальнейшего чтения я нашел довольно много противоречивых мнений по этому вопросу. Я нашел несколько статей, в которых говорилось, что " вы просто не можете смешивать пиксели и проценты". Хотя, по большей части, эти сайты были довольно датированы. Когда я сузил поиск только к статьям, которые были выставлены в течение прошлого года, все немного изменилось. Было еще несколько мнений против смешивания, но они, как правило, не объясняли почему, и, казалось, были разновидностью "Я всегда слышал, что это была плохая идея". Большинство более свежих сведений, которые я нашел в этой теме, похоже, указывают на то, что процент смешивания с фиксированной шириной является вполне приемлемой практикой, , если это делается с пониманием результатов.

см

• " Исправлено против Fluid vs. Elastic Layout: Whats Right One For You?" (июнь 2009 г.)
• " Для красивой сети: изменение макета человека" ...

Полное раскрытие информации: я был миксером уже много лет, не зная, правильно ли был мой подход.

Ответ 2

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

В вашем примере, если вы контейнер 303px, каждая ячейка будет оценивать до 75.66666px и округлять до 76px, в общей сложности 304px, который будет больше, чем контейнер. Этот один пиксель вызывает всевозможные проблемы.

Ответ 3

Это должно помочь прояснить, когда нормально смешивать проценты и пиксели, а когда нет.

Микширование процентов и ширины пикселей не будет проблемой, когда вы это сделаете, как в вашем примере;

.container
{
    width:300px;
}
.cell
{
    width:25%;
}

Когда возникает проблема, когда вы меняете порядок,

.container
{
    width:25%;
}
.cell
{
    width:250px;
}

В этом случае, если окно браузера (или родительский элемент .container) меньше 1000px, 25% на .container будет меньше 250px и вызовет переполнение .cell .container.

Это также становится проблемой, когда вы смешиваете проценты и пиксели в случае ширины и дополнения;

.container
{
    width:300px;
}
.cell
{
    width:100%;
    padding: 10px;
}

Это приведет к тому, что .cell будет иметь ширину 320px (100% + 10px + 10px) и переполнение .container.

Сообщите мне, помогает ли это понять.

Ответ 4

Из исследования, которое я сделал, кажется, что вы нацеливаете свой CSS (id, class, universal... и т.д.), что наиболее важно в производительности рендеринга браузера.

Эффективно рендеринг CSS

Написание эффективного CSS для использования в пользовательском интерфейсе Mozilla

Оптимизировать рендеринг браузера

Ответ 5

Я не могу найти документальные доказательства с тестовыми примерами, чтобы доказать это. Не могли бы вы указать нам, где вы читали об этом?

Я нахожу, что смешивание двух довольно полезно, и я также вижу его в дикой природе на известных/высокоскоростных сайтах.

Единственная проблема, которая в основном затрагивает старые браузеры и IE, округляется. Читайте здесь:

http://ejohn.org/blog/sub-pixel-problems-in-css/

http://agilewebmasters.com/robert/percentage-rounding-and-sub-pixel-perfection/