Смешивание процентов и фиксированного CSS

Question

Это дубликат UI.StackExchange.com:
https://ux.stackexchange.com/questions/1004/mixing-percent-and-fixed-css

Должны ли вы когда-нибудь применять процент и фиксированный CSS вместе? Это вызовет проблемы, и если да, то какие?

• Снижает ли смешивание производительность рендеринга браузера?
• Будет ли смешивание давать странные результаты при начальной загрузке в браузерах с прогрессивным рендерингом?

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

Пример использования смеси:

<style>
.container
{
    width:300px;
}
.cell
{
    width:25%;
}
</style>

<table class="container">
     <tr>
        <td class="cell"><td>
        <td class="cell"><td>
        <td class="cell"><td>
        <td class="cell"><td>
     </tr>
</table>

Answer 1

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

---

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

см

• " Фиксированный и жидкий против эластичного макета: что вам подходит? " (июнь 2009)
• " Для прекрасной паутины: изменение макета человека " ...

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

Answer 2

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

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

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

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

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

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

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

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

В результате .cell будет иметь ширину 320px (100% + 10px + 10px) и переполнение .container.

Дайте мне знать, если это поможет прояснить ситуацию.

Answer 3

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

Answer 4

Из проведенного мною исследования выясняется, что нацеливание вашего CSS (идентификатор, класс, универсальный ... и т. Д.) Является наиболее важным в производительности рендера браузера.

Эффективное отображение CSS

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

Оптимизация отображения в браузере

Answer 5

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

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

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

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

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