Как сделать дизайн адаптивный

     

     

    Как сделать адаптивный дизайн. Давно хотел, сделать на этом сайте так называемый адаптивный дизайн шаблона. Сразу скажу что это мне удалось! Теперь хочу поделиться вами этим. Зачем мне понадобилась верстка под мобильники? Лично я, когда просматриваю сайты на своем телефоне то держу его горизонтально и не замечаю есть ли у сайта адаптивный дизайн или нет. Но есть люди которые держат телефон вертикально, а в таком формате просматривать и читать не адаптированные сайты не удобно. И это, я думаю увеличивает количество отказов. То есть, теоретически адаптация сайта должна улучшить поведенческие факторы . Подготовка к адаптивной верстке, мои рекомендации. 1. Если на ваш сайт сверстан с помощью таблиц, то обязательно переделайте его на верстку слоями (дивами), так будет проще. 2. Уберите из ХТМЛ шаблона все стили, перенесите их в отдельный файл CSS. Все изображения шаблона тоже должны подгружаться через CSS. 3. В <head> вставьте ссылку на таблицу стилей в которой будут прописаны правила для мобильников : То есть при разрешении экрана менее 480px, начинают работать стили в этом файле. 4. Создайте и загрузите на хостинг файл css для мобильных устройств . У меня это small-device.css, вы можете назвать его как угодно. Пример создания адаптивного шаблона на этом сайте. Сначала я открыл основной css-файл. С в поиске Нотпед++ вбил «width» и нашел все стили с фиксированной шириной более 480px, и перенес их в файл small-device.css. Это были: класс ширины колонки с контентом в 550 пикселей, ширина картинки в шапке и в футоре, ширина сайта - 980 пх. Везде установил ширину в 100% Убрал обтекание центральной части. Прописал стиль дива float:none. После чего правая колонка опустилась под контент. Так же поступил с горизонтальным меню. Мне не понавились как смотрятся картинки в шапке и в футоре и я решил исключить их таким кодом: (На одном из сайтов, состоящих из трех колонок, нужно было исключить левую часть. Там находилось длинное меню. Я применил к этому слою свойство - display: none, которое вообще исключает код из документа ) Правая колонка шириной в 250px смотрелась нормально, но на всякий случай присвоил ей ширину 100%. Яндекс с его инструментом "Проверка мобильных страниц" тоже ошибок не обнаружил.

     

    Предыдущая страница   Следущая страница




Рейтинг@Mail.ru