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

Question

[adic3x]

Здравствуйте, мудрецы!

Я просто верстаю себе статический сайт без всяких jquery, javascript (из всех языков знаю ассемблер, но он вроде как для сайтов немного не годится) и вот я услышал про адаптивную верстку. И делается она средствами CSS типа:

@media screen and (max-width: 980px) { /**/ }

1. Я просто хочу, что бы IE678 игнорировали эти настройки, а именно использовали стили для 980px+ разрешения. Подходят ли данные средства CSS для этого? Или нужны костыли? В каком порядке в таком случае нужно указывать правила?

2. Какие разрешения вообще стоит использовать? Понятно, что 980px+ — это стандартный ПК, а вот что указывать для мобильных устройств? Делать одну колонку для разрешения меньше 980px как-то нелепо… наверное?

3. Как насчет retina дисплеев? Они просто считают один пиксел за четыре? Или тоже нужен костыль?

Буду благодарен за ответы ;)

Answer 1

[grokru]

Если это первый опыт адаптивной верстки, то стоит воспользоваться адаптивными CSS-фреймворками. Так проще всего разобраться и с Media Queries, и с другими тонкостями «отзывчивого» веб-дизайна.

Answer 2

[Deenamo]

Пройдите книгу Ethan Marcotte «Responsive Design»: она написана как методичка, в которой походу текста автор превращает обычный сайт в адаптивный и затрагивает вопросы совместимости и т.п.

Answer 3

[Илья Шабанов]

1. так и будет ничего специального для этого писать не нужно, в 6,7 max-width не работает, а все что не работает игнорируется ;) в 8 вроде как работает но только с px

2. Если речь про самые популярные то 320, 480, 768 и 1024, но это вещь сугубо индивидуальная и нужно смотреть как верстка будет выглядеть еще и в промежуточных разрешениях, а вообще в двух словах тут не опишешь вот хорошая статься на эту тему: mobile.smashingmagazine.com/2012/10/24/beyond-common-media-query-breakpoints/

3. Советую посмотреть www.youtube.com/watch?v=n0Vy9cYES-4 после вопросов думаю не останется

Comments

[Илья Шабанов]

по первому вопросу выше верно подметили, Media Queries не работают в Ие до 9 верссии

[Сергей Протько]

max-width в IE7 таки поддерживается. А секции с media Queries будут игнорироваться, да. А вот в 9-ом работать это все будет, потому я бы просто вынес все стили в отдельный файл и подключал его через conditional comments.

p.s. Не забывайте что уже есть IE10, и он будет не только на десктопах.

Answer 4

[egorinsk]

> 1. Я просто хочу, что бы IE678 игнорировали эти настройки, а именно использовали стили для 980px+ разрешения. Подходят ли данные средства CSS для этого?

caniuse.com/css-mediaqueries — IE 6-8 не поддерживают CSS media queries, потому они скорее всего будут игнорировать их. Для этого не надо дописывать ни одной строчки кода :) Соответственно, в Media Queries надо заключать условия для маленьких экранов, а без них — для больших.

> Какие разрешения вообще стоит использовать?

Имхо, только 2 разрешения: большой экран и маленький. Также, если вы хотите, чтобы айфон использовал стили для маленького экрана, а не имитировал большой браузер, надо дописать meta viewport что-то там.

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

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

Comments

[Deenamo]

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

Ну это из другой оперы, «блок с контентом» традиционно оставляли на отдельных мобильных сайтах, а адаптивная вёрстка как раз решала вопрос отображения всего что есть (HTML-то уже в любом случае загрузился весь, его нелогично тупо скрывать)