Отзывчивый дизайн и проценты

Question

Я новичок в отзывчивом дизайне. В настоящее время я использую Zurb's Foundation 4 для прототипа веб-сайта клиентов.

У меня проблема с пониманием, или я должен сказать, вычисляю проценты. Например, у меня есть следующий фрагмент HTML в моем коде:

<ul id="offers"> 
    <li class="small-6 large-3 columns">Offer 1</li> 
    <li class="small-6 large-3 columns">Offer 2</li> 
    <li class="small-6 large-3 columns">Offer 3</li> 
    <li class="small-6 large-3 columns">Offer 4</li> 
    <li class="small-6 large-3 columns">Offer 5</li> 
    <li class="small-6 large-3 columns">Offer 6</li> 
    <li class="small-6 large-3 columns">Offer 7</li> 
    <li class="small-6 large-3 columns">Offer 8</li> 
    <li class="small-6 large-3 columns">Offer 9</li> 
    <li class="small-6 large-3 columns">Offer 10</li> 
    <li class="small-6 large-3 columns">Offer 11</li> 
    <li class="small-6 large-3 columns">Offer 12</li> 
</ul> 

Я хочу, чтобы добавить некоторые промежутки между блоками, с запасом, но я не хочу использовать пиксельные значения, потому что это может занять до много экранной недвижимости. Если, например, я хотел получить 20px-маржу, как я мог бы преобразовать ее в процент и убедиться, что она согласована во всех браузерах?

Это немного смущает меня.

Answer 1

Из того, что я вижу, структура основания zurb использует прописку на столбцах div для создания желоба/интервала между вещами «внутри столбца div». Если вы хотите добавить некоторое поле после столбца div, вам придется пересчитать ширину всех столбцов, чтобы освободить место для поля.

Если вместо этого вы хотели бы изменить отступы столбцов, чтобы быть в процентах, вы должны переопределить правило .column/.columns CSS:

.column, 
.columns { 
    padding: 0 1.5625%; 
} 

Вы можете использовать правило результат = цель/контекст для вычислить процент, здесь я предположил, что вы хотите, чтобы отступы были 15px (в качестве дополнения по умолчанию), когда общая ширина (контекст) равна 960px. Вычисление процента: 15/960 = 0,015625, что составляет 1,5 ...%. Возможно, вам захочется поэкспериментировать с небольшим большим процентом заполнения, так как 1,5% выглядит хорошо, если у вас есть контейнер 960px, но он будет выглядеть очень суровым, когда контейнер равен 480, общее пространство между столбцами будет наполовину (15 пикселей вместо 30px) того, что было в первоначальной реализации (поскольку контекст был сокращен вдвое).

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

Answer 2

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

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

Однако, если вы хотите использовать проценты для захвата определенного объема окна просмотра пользователя, тогда вы должны признать, что точность пикселей больше невозможна.

например.

#offers { 
    width: 1000px; 
    position: relative; 
} 

#offers li { 
    width: 10%; // Width is now 100px 
} 

Но

#offers li { 
    width: 10%; // Assuming there is no positioned parent then width is now 10% width of the users viewport and width depends on viewport size 
} 

Answer 3

Из того, что я понимаю, я установить ширину через процент, я не касаюсь высоты вообще, так скажем, у меня есть 500px ширина DIV в внутри 900px контейнер, если я правильно понимаю, что процент будет:

#sample-div 
{ 
    width: 55.55555555555556%; /* 500/900 = 0.5555555555555556 */ 
} 

подробнее об этом от here

или один другой способ

не используют точек единиц, используйте EM единиц

РХ против эм дискуссии долог, но эм единицы зарекомендовали себя полезными в отзывчивый веб-дизайн. Использование em-устройств должно быть знакомо большинству веб-разработчиков, но стоит их пересмотреть. Единица em является относительной единицей измерения, основанной на родительском элементе.

Наиболее распространенным примером является размер шрифта, если вы хотите, чтобы установить заголовок размер шрифта (20px) на основе вашего тела размера шрифта (10px) в эм единицах:

20px ÷ 10px = 2em 

target ÷ context = result 

body { font: 100%/1.5 serif; /* 16px */ } 

h1 { font-size: 2em; /* 32px */ } 

@media (min-width: 600px) { 
    body { font: 112.5%; /* 18px */ } 
    h1 { /* Do nothing! I'll automatically be 36px */ } 
} 

вы можете прочитать больше от here

Answer 4

Как найти процентную ширину поля 20px? Разделите его на ширину его родителя. Предполагая, что ширина 960px и 20px margin, это 960/20 = 0,02083333, поэтому ~ 2%.

Что касается согласованности браузера, вот здесь все может стать беспорядочным. Что такое 50% из 101? 50,5, очевидно, но так как нет такой вещи, как половина пикселя, браузеры пытаются угадать, к чему это должно округлить значение.

IE - в своей вечной мудрости - все вокруг округляет, что означает, что вы можете оказаться в коробках шире своих родителей, часто нарушая макет. Webkit округляет все, чтобы предотвратить разметки макетов, и Gecko делает сочетание обоих, чтобы избежать пустых пикселей, которые исходят только из округления.

В общем, используйте процентные значения, которые составляют что-то чуть ниже 100%. 99,9% почти всегда достаточно, но вам нужно будет найти максимальное значение для вашего дизайна.

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