Основы адаптивного веб — дизайна (Responsive). Или как сделать простой шаблон адаптивным.

Разместил / Просмотров: 91 846 / Комментариев: 53

Здравствуйте, дорогие читатели блога. Сегодня я с Вам хотел бы поговорить об основах адаптивного дизайна (responsive), а так же разложить по полочкам один из примеров, который я подготовил.

Другими словами мы сегодня узнаем что такое адаптивный веб-дизайн, и в общем как его использовать или же сделать. Хочется сказать сразу, что полностью я его описывать не буду, а затрону так сказать самое главное. Пост будет рассчитан на новичка. Таким образом я постараюсь Вас не запутать.

И так, поехали.

Что такое адаптивный веб-дизайн?

Вы, наверное, не раз заходили на какой нибудь сайт со своего мобильного устройства, и наверное Вам приходилось увеличивать веб страницу, чтобы можно было прочитать этот мелкий текст, который ещё и в добавок полностью не помещается на экране мобильного устройства. Таким образом приходится прокручивать влево или вправо веб страницу, что в свою очередь причиняет некоторое неудобство. А вот если Вы зашли на сайт с адаптивным веб — дизайном, то тут картина совершенно меняется. Вам вообще не нужно делать никаких «тело движений» всё очень удобно и понятно читается.

Другими словами адаптивный дизайн отвечает за правильное отображение сайта на мобильных устройствах. Он так сказать, подстраивает сайт под разрешение мобильного девайса.

Немного теории (Основы)

Как известно, что весь веб дизайн большую часть строится на CSS, в CSS задаётся практически все правила отображения сайта в различных браузерах. Соответственно и адаптивный веб — дизайн не исключение. Самое главное это стандартное правило media queries, в которых и задаются все новые классы под желаемое разрешение экрана. Но и конечно же стандартная CSS вёрстка не много изменилась. Самое большое изменение это использование процентов а не пикселей в ширине объектов.

Например: Размер блока главного контента на странице был равен 600px, а ширина блока сайдбара 400px. В адаптивном дизайне данные значения нужно прописывать в процентах. Исходя из этого у нас получится ширина контента 60%, а ширина сайдбара 40% Надеюсь, что суть Вы уловили.

Так же в стилях будут использоваться новые свойства, которые не использовались при фиксированном шаблоне. Вот они:

max-width и width: если ширина сайта равна width:1000px то при уменьшении окна браузера будет появляться горизонтальная полоса прокрутки, другими словами сайт просто не будет влазить в окно. И его придётся горизонтально прокручивать чтобы увидеть весь сайт. Но если мы поставим width:100% Сайт растянется на всю ширину монитора. На малых разрешениях такой способ будет смотреться нормально, а вот на мониторах с большим разрешением сайт очень сильно растянется и будет совершенно не читабельным. Таким образом если Вы хотите чтобы сайт остался шириной в 1000px, но к тому же чтобы не появлялась горизонтальная полоса прокрутки, нужно применить max-width.

Вот что у нас было:

width:1000px

А вот что стало

width:100%;

max-width:1000px;

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

min-width и width: Тут совершенно всё наоборот, если в первом случае мы избавлялись от горизонтальной полосы прокрутки, то тут мы её возвращаем. Другими словами, если резиновый блок шириной в 100% при уменьшении разрешения будет подстраиваться под окно браузера, чем меньше окно тем и меньше сам блок. min-width может установить значение ширины блока после которого он перестанет уменьшаться. Например, если установить min-width: 200px; то блок при достижении данной ширины перестанет уменьшаться, таким образом будет появляться горизонтальная полоса прокрутки в окне браузера.

Практика

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

Демо

Данный шаблон состоит из трёх блоков — это шапка сайта, главный контент и сайдбар. Таким образом у меня получились блоки к которым я присвоил соответствующие ID CSS:

Шапка сайта — #headerInner

Главный контент — #colLeft

Сайдбар — #colRight

Как проверить?

Чтобы проверить работоспособность данного шаблона, просто поизменяйте курсором размер окна браузера и всё сработает, или же воспользуйтесь сервисами для проверки адаптивного дизайна.

Ну а сейчас давайте посмотрим и разметку html, она довольно проста:

< !DOCTYPE html>






</pre>
<div id="headerInner">
<div class="logo">
 <a href="http://beloweb.ru">Логотип</a></div>
</div>
<pre>

<!-- начало врапер --></pre>
<div id="wrapper">
<div id="middle">
<div id="content">
<div id="colLeft">
<div class="text">
<h1>Основной контент</h1>

Содержание главного контента</div>
</div>

<!-- Конец коллефт -->

<!-- начало колрайт -->
<div id="colRight">
<div class="text">
<h1>Текст сайдбара</h1>

Содержание сайдбара</div>
</div>

<!-- Конец колрайт --></div>

<!-- Конец контент --></div>

<!-- Конец мидл --></div>
<pre>

<!-- Конец врапер -->

А вот стили данного шаблона:

CSS

* {
 margin: 0;
 padding: 0;
 }

body {
 width: 100%;
 height: 100%;
 color:#333;
 background: url(images/body.png) 0px 0px repeat;
 font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size:0.94em;
 line-height:135%;

}

h1 {
 font-size:30px;
 font-weight:normal;
 padding:0px 0 0px;
 line-height:100%;
 font-style:italic;

}

a {
 color: #cd5252;
 text-decoration:none;
 }

a:hover {
 color:#963c3c;
 text-decoration: none;
 }

/* -------------------------------
 Структура
 ----------------------------------*/

/* -------------------------------
 Ширина сайта в 1000px
 ----------------------------------*/

#wrapper {

margin-top:40px;
 border:0px solid #000;
 width: 100%;
 max-width:1000px;
 margin: 0 auto;
 height: auto !important;

}

/* -------------------------------
 Шапка сайта
 ----------------------------------*/

#headerInner {
 border: 0px solid #000;
 background: #d04942;
 position:relative;
 width:100%;
 max-width:1000px;
 height:100px;
 margin:0 auto;
 margin-top:0px;

}

.text {
 margin:15px;

}

/* -------------------------------
 Главный контент
 ----------------------------------*/

#content #colLeft {

border: 0px solid #000;
 float:left;
 width:67%;
 margin-right:0px;
 background: #85c9cf;

}

/* -------------------------------
 Сайдбар сайта
 ----------------------------------*/

#content #colRight {
 position:relative;
 margin-left:30px;
 float:left;
 width:30%;
 border: 0px solid #1FA2E1;
 background: #7a9e0e;

}

#middle:after {

content: '.';
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
 }

/*----------------------------
 Логотип
 ------------------------------*/

.logo {

position:absolute;
 left:0px;
 top:40px;

}

.logo a {
 margin-left:30px;
 font-size:30px;
 color:#96b551;

}

Как Вы заметили, что ширина сайта равна в 1000px и используется width и max-width: о которых я писал выше.

Шапка сайта так же имеете ширину в 1000 пикселей. Главный контент #colLeft имеет ширину в 67%, правая колонка width:30%; и отступ между ними margin-left:30px; далее данный отступ мы будем задавать в процентах.

Использование @media screen

Теперь самое интересно. Сейчас будем использовать @media screen основу адаптивного дизайна.

Но для начала хочется сказать, что в @media screen задаются желаемые разрешения устройств. Их существует множество, вот самые популярные: 320px, 480px, 600px, 768px, 900px, 1200px. В нашем примере мы будем использовать только два разрешения, это 1024px и 768px. Таким образом если разрешение устройства меньше чем 1024px будут задаваться свойства, которые заданы в @media screen. Так же точно и с разрешением 768px.

Вот как выглядит правило @media screen в стилях CSS:

@media screen and (min-width:200px) and (max-width:1024px) {

}

Как видите, что мы задали max-width:1024px, данное значение говорит браузеру с какого разрешения применять правило. А min-width:200px не даст сузить сильно сайт. Между этими скобками {} мы пишем новые свойства классам, которые задали в стилях для шаблона.

1024px

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

Вот что я прописываю в стилях:

@media screen and (min-width:100px) and (max-width:1024px) {

/* размер блока где находятся главный контент и сайдбар*/

body #wrapper {

margin-top:40px;

 width: 90%;
 margin: 0 auto;
 }

/* размер шапки сайта*/

body #headerInner {
width:90%;
 margin:0 auto;

 }

/* размер главного контента*/

#wrapper #content #colLeft {

width:67%;

 }

/* размер сайдбара*/

#wrapper #content #colRight {
 margin-left:3%;
width:30%;
 }

}

Шапке сайта #headerInner задан новый размер в 90%, так же убран max-width: он тут не нужен. #wrapper — это блок в котором находятся контент и сайдбар, его ширина тоже 90% как и у шапки сайта. Ширина сайдбара и контента остались неизменными только изменился отступ у сайдбара в 3%. Это нужно для того чтобы при уменьшении размера окна сайдбар не уезжал вниз.

768px

Теперь задаём стили для разрешения от 768px и меньше. Сейчас нам нужно переместить сайдбар под главный контент, так как если его оставить справа, будет вообще не красиво и нечитаемо на маленьких разрешениях. Вот что нужно прописать в стилях:

@media screen and (min-width:100px) and (max-width:768px) {

#wrapper #colLeft {
 float:none;
 width:100%;
 margin-right:0px;

 }

#wrapper #colRight {
 margin-left:0px;
 margin-top:25px;
 float:none;
 width:100%;

 }

}

Для главного контента #colLeft мы задали ширину в 100%, для того чтобы он растянулся на весь экран, также убрал выравнивание по левому краю float:none, для того чтобы сайдбар #colRight съехал под главный контент.

Для сайдбара, тоже задал ширину в 100% и убрал выравнивание. А так же сделал отступ сверху, чтобы он немного отделялся от контента margin-top:25px;

Вот что у меня получилось:

Демо

Важно!

Обновлено 1,08,2013

Огромное спасибо Александру, который указал на ошибку. Путь можно не прописывать и без них всё отлично работает. Моя ошибка была в том, что правила в CSS я задавал выше основных правил в файле CSS. Задавайте правила адаптивного дизайна в самом конце стилей CSS и будет всё отлично работать.

1. Я заметил одну особенность. Когда задаются правила к стилям в @media screen к классам, к ним нужно прописывать некий путь. Например класс #headerInner вообще не работает без стандартного класса body. Если написать просто  #headerInner и задать к нему правила, то браузер почему то не применяет эти правила, а вот если написать body #headerInner то начинает всё работать. Так же и для всех других классов. Если класс #3 находится в классе #2 то нужно прописывать #2 #3 иначе правила работать не будут.

2. Если Вы собрались делать шаблон с адаптивным дизайном, обязательно между тегами <head> и </head> добавьте вот этот мета тег:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

3. Так же добавьте вот этот код в стилях CSS для картинок:

img {
 max-width: 100%;
 height: auto;
 width: auto\9; /* ie8 */
}

И картинки будут автоматически растягиваться и сужаться.

Вывод

Друзья, это совершенно не сложно как кажется на первый взгляд. Только не много нужно посидеть и разобраться как это работает. Во вторых адаптивный дизайн очень сильно упрощает пользование сайтом на всех мобильных устройствах. Как Вам известно, что сейчас очень стали популярными данные гаджеты. Так что я бы не советовал Вам пропускать данный шаг. Учитесь.

Например я практически без проблем для своего шаблона на блоге  http://beloweb.ru/ сделал доступным для мобильных устройств, адаптивным. Кстати можете проверить :-)

Так  же у данного дизайна есть огромные возможности, сайт можно переделать до неузнаваемости. Но не перестарайтесь, главное удобство.

Друзья, если Вам будет что то не понятно или что нибудь не будет получаться, обязательно пишите в комментариях. До скорых встреч.

  • Александр

    Я надеюсь вы хорошо отнесетесь к критике? Если нет — дальше не читайте.

    Для кого эта статься, чем она отличается от многих подобных статей?

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

    max-width и width: — это не теги, а свойства.
    #headerInner — это не class, а ID!
    #wrapper #content #colLeft {} — зачем так писать?

    Особенность, которую вы заметили, так же под сомнением, скорее всего что-то не правильно делаете.

    Спасибо. Пишите на почту, если есть вопросы.

  • Здравствуйте, Александр. Без критики никуда :-) В первую очередь эта статья для новичков, а отличие её в том, что написал её я. Я попробовал у меня получилось, и просто решил поделиться своими знаниями с пользователями. Так же можно спросить и чем же все статьи в интернете отличаются друг от друга? Например взять эту же тематику. Я например считаю, что если твою статью критикуют, она уже выделилась. :-)

    Ну почему же сразу «грязный и избыточный код»? Я же писал, что это некий путь, без которого классы не работают. Если Вы знаете мою ошибку пожалуйста скажите почему у меня так всё не работает.

    Как ни странно я перепробовал всё. И только данный способ у меня работает во всех браузерах. Я нашёл решение которое работает, и поделился им. Опять же если Вы знаете ошибку, укажите на неё я буду очень благодарен. Так как её решения я не нашёл.

    По поводу терминологии, извиняюсь. Это всё я исправлю :-)

  • Александр

    Прошу прощения, нужно было сразу демо посмотреть.

    “Ошибка” в том, что media queries у вас вверху, а основные правила внизу.

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

    Я обычно media queries выношу в отдельный файл, который подключаю после всех css, или располагаю в нижней части основного.

  • Всё, Александр, понял. :-) Блин, столько информации по этому поводу прочитал, и никто не написал, что media queries нужно прописывать после основный правил. Тогда всё будет работать без этих «путей». :-) И сам я не догадался. Век живи век учись.

    Спасибо Вам огромное, теперь буду знать :-)

    По поводу media queries в отдельном файле читал, но сначала думал так попробовать.

    Александр, ещё раз спасибо :-)

  • Коль пошла такая тема, задам несколько вопросов.
    В какой последовательности располагать медиа-запросы, при условии, что они находятся в конце основного css-документа: от меньшего разрешения к большему или наоборот (использую вот такие конструкции — @media (min-width : 320px) and (max-width : 700px))? В некоторых европейских сайтах вижу, как разрабочики пишут ширину девайса (device-width). Как правильнее?
    «Респонсив» — это круто, но к сожалению, он не работает адекватно на IE. Скрипты облегчают жизнь лишь на половину.

    Фон при использовании background-size не тянется на весь экран в Opera mini.

    Какие уловки используете Вы? Как выходите из таких проблемных ситуаций?

    Буквально вчера запустил сайт с адаптивной версткой!

  • Александр

    «В какой последовательности располагать медиа-запросы, при условии, что они находятся в конце основного css-документа: от меньшего разрешения к большему или наоборот (использую вот такие конструкции — @media (min-width : 320px) and (max-width : 700px))?»

    По-моему логичней располагать от большего разрешения к меньшему, но если размеры не пересекаются — думаю разницы нет.

    «В некоторых европейских сайтах вижу, как разрабочики пишут ширину девайса (device-width).»

    Зависит от ситуации.
    Device-width — это реальная ширина экрана, т.е. на desktop device-width будет один вне зависимости от размера окна браузера. п.с. если ошибаюсь — поправьте, но вроде так и есть.

    «Фон при использовании background-size не тянется на весь экран в Opera mini.»
    Не сталкивался с таким. Как вариант скрыть картинку?

  • Я вот и использую запросы так, как Вы написали. Картинку скрыть не получится — действующая часть интерфейса. С помощью CSS никак не получается уладить ситуацию. Применять скрипты не хочется. Самая больная тема — IE. Как быть?!
    Вы что используете?!

  • Александр

    А, про IE-то забыл. Забейте на IE.
    Зачем там адаптация, она же для мобилок и планшетов, а там, к счастью, нет IE.

    Хотя в мобилках на винде наверно есть IE, но что-то мне подсказывает там все работает.

  • Александр

    Постойте, респонсив вебдизайн рассчитан на адаптацию сайта к разрешению совершенно любого устройства, будь то широкоформатный экран или самый крошечный дисплей мобильного телефона. IE — десктопная версия браузера, им продолжают пользоваться и по сей день. Получается 30% аудитории Вам безразлична?!

    При построении адаптивной верстки вы не используете условные комментарии для IE?!

  • Александр

    Вы не поняли главную пою мысль.
    На desktop, если браузер не поддерживает media queries, то можно отображать стандартный вид сайта (например на 1000).
    Что касается мобильных версий, то там media queries работают в подавляющем большинстве браузеров.

  • Кстати, за ИЕ полностью солидарен, так как «Слава Богу» Он не используется в мобильных устройствах. Так что можно смело делать адаптивный дизайн и не думать за ИЕ.

    По поводу Opera mini, по любому должны быть скрипты которые решат данную проблему. Но мне кажется (как писал выше Александр) что лучше скрыть просто это изображение при малом разрешении, так как весь контент просто закроет его полностью, и толку от этой картинки не будет, так как пользователь её просто не увидит.

  • Структура сайта такова, что при разрешении 700px, когда срабатывает @media max-width:700px (для iPad’a, например), бэкграунд все равно проглядывается, его никак не убрать, поскольку блок с основным контентом расположен справа, а меню слева. Без него все ужасно, на мой взгляд! Для разрешения я, естественно, убрал изображение, поскольку блок занимает 100% экрана.
    Я, видимо, некорректно задал вопрос. Просто на IE отображается все не так, как надо.
    Тестирую свой сайт на разных устройствах — все прекрасно!

  • Александр, когда я делал мой блог адаптивным, я тоже столкнулся с проблемой. А именно блог вообще не корректно отображается в ие 6. И что я только не делал всё без толку. Зато в ие 10 он отображается просто замечательно.

    Так что я подумал, не нужно и мучиться. Я тоже тестировал свой блог на разных устройствах и он на них отображается отлично. Всё работает. А вот ие 6 ну никак не хочет отображать его нормально. Ну а что поделать. Не правильно будет отказываться от адаптивного дизайна только потому что его не поддерживает ие.

  • Артем

    Здравствуйте, Александр! Скажите пожалуйста, как в верхнем меню вы сделали отображение рубрик в стандартном списке? То есть когда я уменьшаю экран до предела, то тогда это происходит.

  • Артём, этот список выводится с помощью скриптов, если Вы хотите сделать подобное, в интернете есть множество адаптивных меню такого типа.

  • Сергей

    По поводу IE6, почему не работает

  • А что сейчас под него работает?

  • Сергей

    Но должна же быть кросбраузерность

  • Артем Нестер

    Здравствуйте еще раз, Александр! Меня интересует просто один вопрос:

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

    Скажите пожалуйста, так ли это?

  • Артём, по сути, картинка только уменьшается в размере, она просто будет смотреться сжато и всё. А по другому как этот вопрос решить? Наверное никак ;) так что делайте и не переживайте.

  • 4idroid

    Здравствуйте, Александр! Я хочу сделать так, что при разрешении меньше 700px сайдбар делился на две колонки скажем по 350px. Не подскажите как это реализовать или может видели подобную статью в Интернете? Уже многое перерыл — не нашел. Надеюсь вы мне подскажите.

  • С самого начала нужно сделать чтобы эти 2 сайтбара были вместе, то есть поместить их в блок div и задать этому диву float: none; что бы при желаемом разрешении он сдвигался вниз. Так же нужно задать float: none; блоку с основным контентом.

  • Иван

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

  • Здравствуйте, Иван. Рад, что Вам понравилась статья. Вообще можно использовать оба способа. Но как по мне, то медиа запросы (CSS) на много быстрее грузятся чем скрипты. Соответственно лучше использовать медиа запросы. И ещё зачем использовать скрипты если стилями можно добиться того же, но это моё личное мнение. Кому как удобнее.

  • Иван

    Вы правы Александр, медиа запросы лучше определенно. Скажите. а чем отличается ваш вариант viewport от такого:

    Может Вы в качестве дополнения к статье, расскажете подробнее о параметрах этого мета тега?

  • Иван, этот тег работает только на мобильных устройствах. Для того чтобы сайт правильно масштабировался. По сути эти теги ничем не отличаются.

  • Иван

    Александр, здравствуйте еще раз.

    Меня вот что интересует. С помощью медиа запросов, можно только запретить или задать обтекание элементу. А вот как быть, если необходимо при меньшей ширине экрана перенести скажем форму поиска из блока #content в блок #header? С помощью обтекания такое не сделать.

    Вот наткнулся на статью CSS3 Grid Layout, где заранее размечается сетка страницы, и в стилях элементу задаются координаты, т.е. местоположение элемента на странице. Казалось бы, вот оно решение, но к сожалению этот метод не получил еще широкой поддержки, а значит далеко не везде будет работать.

    Может есть какая jquery библиотека имитирующая эту сетку? И будет ли она работать везде? Что Вы можете мне посоветовать, как бы Вы решали такую проблему? Есть конечно вариант сделать две формы поиска, одну включать а другую выключать при разных разрешениях, но это как обходной путь.

  • Иван, с помощью CSS вряд ли можно редактировать расположение элементов в HTML разметке. В таком случае лучше поиск сразу поместить в нужный блок и задать ему абсолютное позиционирование. Я так и делаю.

  • Зло

    Нет

  • Злопыхатель

    И сайДбар, а не сайТбар. От слова «side».

  • Дмитрий

    Если в качестве фона указана картинка, то как сделать, чтобы фон тоже изменялся?

  • Дмитрий

    Здравствуйте, Александр. Если в качестве фона прописать фото, как сделать, что бы она изменялась?

  • В смысле? Можно подробнее? А вообще в стилях в правиле ховер.

  • Изменялся когда?

  • Федор Евдокимов

    Полагаю Дмитрий говорил об изменениях масштаба фото, типа как здесь:
    http://svenprim.com/. В целом меня этот вопрос тоже интересует, т.к. масштабируемый бэкграунд мне пока что не дается.

    Но в общем идея такая, скажем сайт вертикально разбит на 3 блока (меню, текст, фото), могу ли я при такой верстке отключить фото, либо изменить его вид отображения?

  • Да, можете, вписываете желаемое разрешение, и желаемые правила к нему в стилях.

  • Федор Евдокимов

    Большое спасибо, статья очень помогла. Никак не на любуюсь на полученный результат : )

  • Ура :)

  • Евгений Видягин

    А можно было это сделать с помощью @media манипулируя свойством display:none;?

  • Да, можно конечно, тогда нужно делать два меню.

  • Евгений Видягин

    А как считаете, какой вариант лучше? Что быстрее выполнится/прогрузится? Как правильнее? Или все же в зависимости от ситуации?

  • Без скриптов лучше, но бывает без них никак.

  • Евгений Видягин

    Ясно. Спасибо.

  • Кирилл

    Используйте плагин Resize Window для браузера Google Chrome/

    http://c2n.me/jmuxOS.png

  • Андрей

    а вот у меня вопрос один возник: есть div красного цвета, если width: 100%; а max-width не указывать, то даже если ширина экрана будет 20 000 px, то этот div будет красным и на столько будет растягиваться?

  • Для создания адаптивного дизайна сайта с чистой семантической вёрсткой используйте MACAW !!! Не пожалеете !!!

  • Вован

    Здраствуйте!
    как вы оцените адаптивность без стилей и без бустрапа на таблице левого меню со свойством align=»left» width=»250″ ?
    http://Vveb.ws/adaptivno/
    получается боковое меню сдвинуть над текстом. а под текстом не получается.
    получается боковое меню только фиксированной ширины.
    мне самому не очень, но работает везде (Opera, Faerfox, Chrome, Chromium, Maxthon, yandeks-brauzer, AvantBrowser, Apple_Safari_5.1.7) кроме старого фаерфокса (v32) и IE 6, 7, 8.
    Новые IE 9, 10,11 не могу поставить на свою винду ((

  • Здравствуйте. Смотря для чего Вам это меню нужно. Хотя в примере я меню никакого не увидел.

  • Вован

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

  • Адаптивный дизайн специально и был придуман специально для мобильных устройств :) Я думаю, что можно использовать!

  • Вован

    Здраствуйте ещё раз!

    К сожалению, вашим методом пользоваться не буду,

    Получается что если у тебя скажем таблица широкая на сайте, то данный css адапативности не работает. а таблицы кое-где есть. и кое-где они широкие.

    Если левый не сжимается (смотря по контенту), то если делаешь экран уже то правый блок меню налазит на левый во всех браузерах.
    пример тут http://ozozhe.ru/forum/blograting.php ШИРОКАЯ ТАБЛИЦА — сайт (левый блок) в итоге нечитаем на обычном мониторе.

  • Вован

    я попробовал сделать так 1 тему
    выберите справа вверху в «Переключатель дизайна» тема Greeny.

  • С таблицами, это вообще отдельная тема :(