Мини-чат для ВебМастеров
Fupep
Fupep
Сегодня в 12:50:42

Нужна помощь
Что за движок FF?
emekafuti
emekafuti
7 апреля 2022

Защита от компьютерных нападений – полезные советы на познавательном проекте Hydra <a href="http://mission.bz/inde
x.php?act=dispBoardWrite">
;http://mission.bz/index.php?act=
dispBoardWrite</a>
ytuwi
ytuwi
2 апреля 2022

Каким способом правильно провести анонимную закупку в глобальной паутине <a href="https://hydraclubbiokn
ikokex7njhwuahc2l67lfiz7z36md2jvo
pda7nchid.onion-o.com">hy
draclubbioknikokex7njhwuahc2l67lf
iz7z36md2jvopda7nchid как пополнить баланс на гидре</a>
icipaha
icipaha
2 апреля 2022

Возможно ли правильно провести персональную покупку в сети интернет <a href="https://hydraclubbiokn
ikokex7njhwuahc2l67lfiz7z36md2jvo
pda7nchid.onion-u.com">hy
draclubbioknikokex7njhwuahc2l67lf
iz7z36md2jvopda7nchid сайт гидра онион тор</a>
yjovekof
yjovekof
1 апреля 2022

Как надежно провести неидентифицируем?
?ю сделку в глобальной паутине <a href="https://hydraclubbiokn
ikokex7njhwuahc2l67lfiz7z36md2jvo
pda7nchid.onion-s.com">hy
draclubbioknikokex7njhwuahc2l67lf
iz7z36md2jvopda7nchid гидра сайт цены</a>
omidyty
omidyty
16 марта 2022

Основы покупок на площадке ГидраРУ <a href="https://web.hydra-mark
et-place.com">гидра зеркало ссылка hydra</a>
ysyryxa
ysyryxa
16 марта 2022

Как безопасно сделать анонимную сделку в сети интернет <a href="https://shop.hydraclub
bioknikokex7njhwuahc2l67iflz7z36m
d2jvopda7nchid.com">ги?
?ра анион</a>
imyfe
imyfe
14 марта 2022

Значительный показатель безопасности при операции на HydraRU <a href="https://market.xn--hyd
rclubb-31a.com">https://m
arket.xn--hydrclubb-31a.com</a
>
olaqixif
olaqixif
14 марта 2022

Как надежно оплатить скрытую покупку в инете <a href="https://web.hydrawiki.
cn">https://web.hydrawiki
.cn</a>
ahuvuha
ahuvuha
11 марта 2022

Средства безликих покупок на маркетплейсе Гидра <a href="https://market.xn--hyd
rclubb-31a.com">сайт гидры на торе</a>

Только зарегистрированные посетители могут писать в чате.
Счётчики
Рейтинг@Mail.ru Яндекс.Метрика

Как сделать DLE шаблон адаптивным




Начнем с определения терминов «адаптивный сайт» и «адаптивный веб-дизайн». Собственно, определение интуитивно понятно из самого термина: «адаптивный», «адаптироваться». Эти слова фактически являются синонимами слова «подстраиваться».

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

Для иллюстрирования примера давайте возьмем стандартный шаблон Default для DLE. Этот шаблон доступен нам сразу после установки CMS, и он уже адаптивный.

Как видим, шаблон автоматически подстроился (адаптировался) под ширину окна браузера или устройства. Это очень удобно для читателей вашего сайта. И, поверьте, если ваш сайт не адаптируется, то какую-то часть посетителей вы однозначно потеряете.

Но и это еще не все. Сегодня поисковые роботы все активнее используют критерий адаптивности, как один из критериев при ранжировании и оценке сайта. Например, Google однозначно заявил, что будет занижать позиции сайтов, которые не являются адаптивными. Ну а это значит, что вы можете потерять не только часть существующей аудитории сайта, но и часть потенциальной аудитории.

Именно поэтому сделать сайт адаптивным сегодня крайне важно. Как же сделать адаптивный шаблон для DLE. Здесь есть пара вариантов. Первый вариант — использовать CSS фреймворк при верстке шаблона, например популярнейший фреймворк Bootstrap. Этот фреймворк позволяет верстать изначально адаптивные шаблоны.

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

Простейший пример. У нас есть двухколоночный сайт, который на мобильных устройствах должен превращаться в одноколоночный. Решить задачу крайне просто. Для получения двух колонок для десктопных устройств мы, как обычно, используем свойство float, задавая обтекание колонок. Ну а на нужной нам ширине окна браузера мы просто сбросим float, используя значение none. 

@media only screen and (max-width : 767px) {
           .sidebar{
                  float: none;
           }
}


Ну и, конечно же, не забывайте об этой строке кода в шапке вашего сайта (между тегами head):
<meta name="viewport" content="width=device-width, initial-scale=1">

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


Гость, оставишь комментарий?
Имя:*
E-Mail: