используя их или проценты для макета сетки CSS

Question

Я работаю над сайтом на 3-4 страницы.Он будет использовать вызовы jQuery, jQuery UI и Ajax для большинства страниц.Я надеюсь, что мне не придется кодировать что-либо в пикселях.

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

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

#container {
  max-width: 75em;
  margin: 0 auto;
}

#primary {
  float:left;
  width: 25%;
}

#content {
  float:left;
  width:50%;
}

#secondary {
  float:left;
  width:25%;
} 

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

Спасибо

Answer 1

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

Некоторые дополнительные идеи:

ОтМой опыт выбора%, px, em зависит от проекта (и, следовательно, от цели сайта).

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

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

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

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

Answer 2

Вы можете использовать это: http://grids.heroku.com/ и выбрать опцию ширины жидкости при предварительном просмотре / загрузке.