Переводим в код 5 действительно полезных шаблонов адаптивной разметки

[WebAlex]

Спасибо. Пригодится!

[hautamaki]

Вот думаю, адаптация вёрстки для IE6 — это ссылка на гугльхром?
А автору респект и уважуха. Больше вёрсток адаптивных и разных.

[Goobs]

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

[hautamaki]

Я скорее об интересной интерпритации стилей в ИЕ6. И о том, стоит ли овчинка выделки.

[dmitriid]

А можно взять что-нибудь типа foundation.zurb.com/ :)

[Softlink]

Да, можно. Причем, этом не один такой единственный фреймворк. Задача моего поста и поста buddah, показать, что media queries использовать совсем не страшно(и даже интересно). Их надо уже применять. Ведь доля мобильных браузеров растет. Допустим, об ИЕ7, у которого доля в районе 3-5% мы и заказчики почему-то заботимся, а об Opera Mini, перепрыгнувшей рубеж в 10% мы благополучно забываем.

[rumkin]

Всего два состояния — не катит! Посмотрите на их же пример. При ресайзе превьюшки превращаются в обои для рабочего стола, этого не должно быть как логически, так и практически (изображение растягивается более чем в три раза!!!). На многих таблетках и смартфонах (при горизонтальном просмотре) такой сайт будет смотреться крайне уныло.

[rumkin]

Более того, верстка должна быть продуманна и для ламповых телевизоров!
А, если серьезно, то с помощью адаптивной верстки, можно сделать мобильную версию сменой всего одного класса!

[vc54]

Я для старых осликов просто прописываю min-width равный, по старинке, 960 пикселям, или в районе того, согласно макета.

[slaveoffear]

Все конечно здорово, но на примере шаблонов, ссылка номер 4, как смотрится меню в четыре пункта, если там написать текст (Главная, Услуги, Портфолио, Контакты) и посмотреть на экранах 320х480, 480х800. Тест просто не входит, придется как-то решать эту проблему.

[Softlink]

Для меньших разрешений пишем свой @media screen и смещаем все пункты меню друг под друга. Или делаем один пункт-выпадалку, в которую и заталкиваем их.

[ich]

Автору Большое Спасибо! Я как человек только косвенно работающий с вёрсткой, обязательно воспользуюсь примерами. Примеры выполнены очень аккуратно.

[infinius]

«Я не захотел высчитывать размеры для border-radius, поэтому круг будет квадратным...»
Я не совсем понял, на сколько это ирония, но на всякий случай скажу, что border-radius:100% делает круг :)

[infinius]

Ну, писать везде border-radius:64% — не круто, а 100% — отлично!

[Softlink]

Может для вас будет сюрпризом, но круг получается, если ширина равна высоте, в любом другом случае будет эллипс. Учитывая, что здесь и высота и ширина изменяются, то надо было обязательно их подогнать, чтобы они были равны. Понимаете?

[infinius]

Так подгонять нужно высоту к ширине, а не радиус. В любом случае, я написал это на всякий случай.
Резина с тразнишэнами смотрится великолепно. * { transition: all… } сильно повлияет на скорость в крупных проэктах?

[Softlink]

Наверное, я не очень правильно истолковал свою мысль в посте, но это и имелось ввиду:
«Я не захотел высчитывать размеры для border-radius» = я не захотел подгонять высоту на разных @media screen. Ну да ладно.

* { transition: all… } сильно повлияет на скорость в крупных проэктах?

Честно говоря, я даже не пробовал применять такой селектор с таким транзишеном на каком-нибудь проекте. Насчет тормозов оно может и не сильно будет заметно, но дело в другом. transition: all будет менять абсолютно все свойства, которые может менять, а селектор "*" еще и разрешит ему это делать во всех блоках. Сооветственно, может всплыть неожиданно\не запланировано плавное изменение цвета текста или фона, или вообще какого-нибудь z-index. В общем, плавное изменение всего, что меняет свое значение.

[Sytrus]

Веб-дизайнеры, вы же услышали, да?

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