D.iK.iJ
 
Ссылки Поиск Написать В избранное NO

Блоггер / Блог 2015 год

RSS лента новостей, Подписка по Email

      Адаптивная верстка - это просто!

         Ура! Я получил свои 99 / 100 Удобство для пользователей.

         Делалось довольно просто, если интересно:
         1) Табличку меню сделал align="left" ну или style="float: left;"
         2) Табличку контента не трогал, добавил center
         3) Перед футером: (clear="all")
         4) Всякие счетчики и подписи (которые должны стоять рядом) засунул в блоки со стилями (display: inline-block; width: 30%;)

         5) Допилил немного media:
         - Увеличил шрифты при уменьшении экрана (font-size: 110%)
         - Интервал между строк тоже подрос (line-height: 130%)
         - Появились переносы через hyphens: auto;
         - Меню где-то на ширине экрана 500px разворачиваю на width: 100%;
         - Ну а лишние блоки, виджеты и групп и небоскреб в левой колонке скрываю через display: none !important;

         Кажется, все. Только для ширины экрана в 350 добавляю переносы всех слов в любом месте (word-break: break-all) и еще увеличиваю шрифт и межстрочный интервал.

         Если интересно посмотреть: http://dikij.com/
         Или: http://atola.name/

         С хрома можно смотреть прямо так (надо только обновлять страницу на нужном размере - чтобы реклама не мешала и подстраивалась).
         P.S. Фаерфокс что-то тупит и не переносит таблицу на новую строку.

         
         
Главная, 1, 2,
( 70 )