Адаптивная верстка

[FaLaRD]

Все привет.

 

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

 

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

 

http://falard.org/

 

Кроме того, прошу ответить на 2 очень волнующих меня вопроса:

 

1) Я понимаю логику работы em для шрифтов, именно его рекомендуют использовать в адаптивных сайтах, однако пока что не было ни одного весомого аргумента, использовать его, а не пикселяи. em как и пиксели динамически не меняются при ресайзе. Просто вычисляются относительно родителя, пиксель также работает, только абсолютно. Рекомендуются также rem, но хотелось бы выбрать самое то, хотелось бы использовать правильное измерение

 

2) Сколько искал, так и не нашел стандартный, шаблонный набор медиа брейк поинтов. Использую тот, к которому пришел логически - http://falard.org/css/media-query.css прошу также оценить его, насколько он гибок, и что можно поправить. Понимаю что они могут быть очень разными, но на данный момент 

 

Заранее спасибо!

 

 

[afdw]

1) Смысл em ил rem в том, что можно поменять в медиа-запросе размер шрифта для body, и относительно поменяется размер шрифта у всех элементов страницы.

[FaLaRD]

1) Смысл em ил rem в том, что можно поменять в медиа-запросе размер шрифта для body, и относительно поменяется размер шрифта у всех элементов страницы.

Вопрос не в разнице rem и em, а преимущество емов перед пикселями.

[CroaToa]

Вопрос не в разнице rem и em, а преимущество емов перед пикселями.

Выше как раз описали не разницу между rem и em а их преимущество перед пикселями. 

Edited May 31, 2014 by CroaToa

[FaLaRD]

 

Вопрос не в разнице rem и em, а преимущество емов перед пикселями.

Выше как раз описали не разницу между rem и em а их преимущество перед пикселями. 

 

А такой подход является надежным?

[afdw]

 

 

Вопрос не в разнице rem и em, а преимущество емов перед пикселями.

Выше как раз описали не разницу между rem и em а их преимущество перед пикселями. 

 

А такой подход является надежным?

 

Em вычисляется от родителя, rem - от корневого элемента (html). В разных случаях по разному, в зависимости от целей.

[xzarxzes]

2) Сколько искал, так и не нашел стандартный, шаблонный набор медиа брейк поинтов. Использую тот, к которому пришел логически - http://falard.org/css/media-query.css прошу также оценить его, насколько он гибок, и что можно поправить. Понимаю что они могут быть очень разными, но на данный момент 

 

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

 

А вообще media query советуют устанавливать, ориентируясь не на размеры экранов устройств, а когда ломается дизайн, тогда и ставить брейкпоинт.

 

upd: элемент address используется для указания ссылки на создателя сайта, или автора статьи, а не как обертка для любого адреса который присутствует на странице http://www.w3.org/html/wg/drafts/html/master/sections.html#the-address-element. 

Edited May 31, 2014 by xzarxzes

[html6]

В использовании em есть свои плюсы, но есть и минусы. Адаптивная верстка может поломаться  при зуме и изменениях базового размера шрифта . Информация здесь

Edited May 31, 2014 by html6

[SelenIT]

Хабрапост по ссылке про em-ы в медиавыражениях, а не для размера текста. Сами тексты в современных браузерах, насколько мне известно, зумятся одинаково независимо от единиц (это только в IE6 были проблемы с зумом px).

[FaLaRD]

В использовании em есть свои плюсы, но есть и минусы. Адаптивная верстка может поломаться  при зуме и изменениях базового размера шрифта . Информация здесь

В бутстрапе v2.3.2 используются px. Где можно найти ответ) Я запутался. Конечно классно было бы на них остановиться, но хочется правильно, иначе не разбирался бы.. 

[SelenIT]

Серебряной пули нет, всё зависит от задачи.

Если верстается промо, с подгонкой надписей под графику и т.п., альтернативы пикселям немного. Если контент и под новые браузеры — удобно задать основной размер (для HTML) в пикселях, а дальше от него плясать rem-ами. Аналогично бывает удобно делать масштабируемые виджеты (кнопки и т.п.) с размерами в em-ах — тогда их размер будет подстраиваться под контекст в зависимости от размера текста родителя. Завязывать всё на em-ы, как по мне, быстро превращается в мучение из-за неудобных дробей, но опять же — надо смотреть по ситуации.

[CroaToa]

Серебряной пули нет, всё зависит от задачи.

Если верстается промо, с подгонкой надписей под графику и т.п., альтернативы пикселям немного. Если контент и под новые браузеры — удобно задать основной размер (для HTML) в пикселях, а дальше от него плясать rem-ами. Аналогично бывает удобно делать масштабируемые виджеты (кнопки и т.п.) с размерами в em-ах — тогда их размер будет подстраиваться под контекст в зависимости от размера текста родителя. Завязывать всё на em-ы, как по мне, быстро превращается в мучение из-за неудобных дробей, но опять же — надо смотреть по ситуации.

полезное сообщение, спасибо.