Почему ширина 960px?

Ответ 1

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

960 имеет множество факторов:

echo factors(960);
1  2  3  4  5  6  8  10  12  15  16  20  24  30  32  40  48  60  64  80  96  120  160  192  240  320  480  960 

1000 не имеет столько

echo factors(1000);
1  2  4  5  8  10  20  25  40  50  100  125  200  250  500  1000  

В частности, вы можете легко разделить 960 на 2,3,4,5,6 и 8 столбцов.

Ответ 2

Почему для макета сайта предлагается 960px?

960 пикселей является общей шириной для веб-макетов, поскольку 1024 x 768 были наиболее распространенным разрешением в течение многих лет, и дизайнеры были вынуждены проектировать для самого низкого общего знаменателя. При проектировании до фиксированной ширины целесообразно проектировать так, что большинство людей не видит горизонтальную полосу прокрутки. Если ваш дизайн имеет ширину 1024 пикселя, страница, которая выше, чем область просмотра (скажем, 768 пикселей для простоты), неожиданно представит вертикальную полосу прокрутки, съедая доступное горизонтальное пространство, которое внезапно станет меньше 1024 пикселей (1024 минус ширина вертикальная полоса прокрутки).

Итак, вам нужна ширина меньше 1024 минус ширина вертикальной полосы прокрутки. Ширина полосы прокрутки не превышает 20 пикселей, но учитывает не максимизированные окна и заканчивается номером, который легко делится на максимально возможное количество факторов, поскольку это упрощает проектирование ящиков или столбцов с фиксированным размером, Поскольку 960 имеет больше факторов, чем 1000, выбрано 960.

Это частично ложная защитная сетка, которая основывает дизайн на фиксированной ширине 960 пикселей, хотя многие люди не будут максимизировать свои окна или даже переразмерять их должным образом, поэтому даже с разрешением выше 1024, их браузер окно может не соответствовать 960 пикселам. Именно поэтому отзывчивый веб-дизайн начинает снижаться, когда проекты более гибкие и отвечают на настройки пользовательского устройства (например, разрешение экрана).

Что такое система Grid?

Сетка - это всего лишь набор предопределенных имен классов CSS, которые вы можете использовать в своих HTML-документах, чтобы выровнять различные поля в вашем проекте в виде "сетки", которая соответствует одному или нескольким общим макетам для веб-дизайна. Сетчатая система хороша, если вы не знакомы с CSS и трудно согласовать поля (как по ширине, так и по высоте), в которые входит ваш дизайн.

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

Ответ 3

960px используется, потому что он делится на 1, 2, 3, 4, 5, 6, 8, 10, 12, 15 и 16... - позволяет дизайнерам иметь огромное разнообразие различных ширины столбцов и возможно макеты. Вероятно, в этом отношении есть и другие "магические" числа.

Также, как указано, ширина 960px соответствует большинству разрешений "красиво".

Ответ 4

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

960, как говорят другие, основывается на 12 или 16 colums, потому что его можно разделить на самые разные числа. Таким образом, вы можете иметь строку let, чтобы сказать 8 элементов и один из 4 и иметь одинаковое пространство между вашими элементами. Если вы посмотрите на ссылку, вы можете видеть, что белые поля между элементами одинаковы, вы делаете макет ячейки 2-8-2 или компоновку ячейки 4-4-4 (на основе 12 колонок)

Ответ 5

Я думаю, что причина делимости является основной причиной. {2 ^ 6, 3, 5} допускает (7 * 2 * 2) = 28 масштабных коэффициентов используя шесть двойников и следующие два наименьших простых числа

Также 960 = 1920/2 Он также удваивает защиту другого прецедента: в котором пользовательская плитка 2 окна бок о бок как браузер на левой стороне, и текстовый процессор справа.

Ответ 6

960px имеет огромное количество факторов, что означает, что макеты могут иметь полные пиксельные и нормальные значения с множеством разных измерений.

960px используется, потому что наиболее распространенное и минимальное разрешение экрана используется регулярно. Вы получите мобильные устройства и несколько экранов 800x600, но их немного и много. Дополнительное пространство на стороне (сторонах) страницы позволяет использовать границы окна и полосы прокрутки, не затеняя содержимое.

Ответ 7

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

В течение последних трех лет, спроектировав/построив сотни чувствительных целевых страниц, я обнаружил проблему с сеткой пикселей на 960 пикселей. Поскольку в гибких проектах используются проценты для ширины вместо пикселей, число 100 становится все важным. Второй важный аспект этой проблемы - избегать использования дробных процентов. Последняя важная часть состоит в том, чтобы убедиться, что ширина изображения в точности пропорциональна проценту, который они занимают. Учитывая эти три ограничения, существует только одна сетка, которая имеет смысл: сетка с 1000 пикселями.

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

Для тех, кто знаком с валютой США, а именно долларом, вы уже понимаете, как работают целые числа. Вы знаете, что доллар можно подразделить на пенни, никели, копейки, четверти и пятьдесят центов. Каждый раз, когда вы должны разделить доллар тремя способами, кто-то получит лишнюю копейку. В вашем макете, используя целые числа, это означает, что три столбца могут быть установлены как 33%: 34%: 33%. Размеры вашего изображения будут 330 пикселей, 340 пикселей и 330 пикселей. Различия в ширине практически незаметны, потому что наше восприятие гораздо больше настроено на выравнивание элементов, а не на сравнение ширины. 100-процентная сетка и сетка с 1000 пикселями коррелируют как простое соотношение 1:10. Этот метод прост, точен и прост в запоминании.

Построение ваших макетов с использованием процентов - это огромная экономия времени. Наш основной контейнер получает фиксированную ширину пикселей, установленную с использованием одного класса CSS. Когда вы меняете фиксированную максимальную ширину, макет масштабируется. Когда мобильное устройство, такое как таблица или телефон, запрашивает вашу страницу, ваш макет будет масштабироваться соответствующим образом. Однако я бы ограничил верхнюю шкалу не более чем на 125%, чтобы избежать заметного смягчения изображений. Например, наш новый приблизительный порт представления 1230 пикселей попадает в это ограничение.

В заключение, лучше всего помнить, что мы ремесленники, которые в лучшем случае создают истинное искусство. История дает нам замечательные аналоговые примеры, созданные до того, как существовали компьютеры. Мы все видели красивые мозаики, созданные сломанными кусками стекла или плитки; их красота исходит не от механических, ровных кусков, а из тщательно продуманных деталей, собранных руками художника. Установленные исторические методы дают представление о решении подобных проблем, обнаруженных в веб-дизайне.