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

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

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

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


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

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

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

Буду благодарен за ответы ;)
  • Вопрос задан
  • 20342 просмотра
Пригласить эксперта
Ответы на вопрос 4
grokru
@grokru
Если это первый опыт адаптивной верстки, то стоит воспользоваться адаптивными CSS-фреймворками. Так проще всего разобраться и с Media Queries, и с другими тонкостями «отзывчивого» веб-дизайна.
Ответ написан
@Deenamo
Пройдите книгу Ethan Marcotte «Responsive Design»: она написана как методичка, в которой походу текста автор превращает обычный сайт в адаптивный и затрагивает вопросы совместимости и т.п.
Ответ написан
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 после вопросов думаю не останется
Ответ написан
@egorinsk
> 1. Я просто хочу, что бы IE678 игнорировали эти настройки, а именно использовали стили для 980px+ разрешения. Подходят ли данные средства CSS для этого?

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

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

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы