| Vitalya | Дата: Понедельник, 06-Февраля-2017, 00:22:19 | Сообщение # 1 |
 Генерал_палкомник
Группа: Администраторы
Сообщений: 114
Награды: 0
Репутация: 32767
Статус: Offline
| 
В этой заметке я не буду на каком-то профессиональном языке что-то там объяснять. Сам не профи. Просто сделаю своего рода запоминалку и возможно она пригодиться еще кому-нибудь.
Недавно на глаза мне попались ролики на ютюбе по адаптивной верстке и это не спроста. Просто на моём втором блоге шаблон (бесплатный из паблика) уже адаптирован под мобильные устройства: когда зайти с планшета, или телефона, то он красиво подстраивается под размер экрана. А на этом блоге seodnevnik.ru дела плохи. И я решил тоже в этом шаблоне что-нибудь
В общем, суть в том, что в стилях css можно использовать медиа-запросы. Я этого раньше никогда не делал, поэтому для меня это информация была новой.
Перед тем, как приступить к написанию стилей, убедитесь, что между тегами head/, вашего шаблона, прописана meta-строчка:
Код <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Итак, в зависимости от размера экрана, мы можем прописать отдельные стили в файле сss: основной стиль для компьютера, потом для размера ниже 992px и 768px (для планшетов), и для 480px и 320px (для телефонов).
Под все размеры стили написать невозможно, т.к. их очень много, поэтому как правило проводят оптимизацию под перечисленные выше размеры окна браузера.
Пример:
Код .content{background-color: #FBFBFB; position: relative;margin: 0;padding: 0;border: 0;float: left;overflow: hidden; max-width: 768px; width: 100%;}
.sidebar1{background-color: #FBFBFB; position: relative;margin-right: 0;padding: 0;border: 0;float: left;overflow: hidden; width: 100%; max-width: 268px;}
blockquote{margin:10px 10px 10px 35px;}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
.content{max-width: none; width: 100%;}
.sidebar1{max-width: none; width: 100%;}
blockquote{margin:10px;}
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.content{max-width: none; width: 100%;}
.sidebar1{max-width: none; width: 100%;}
blockquote{margin:10px;}
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
.content{max-width: none; width: 100%;}
.sidebar1{max-width: none; width: 100%;}
blockquote{margin:10px;}
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
То есть, для телефона не обязательно показывать сайдбар — его можно убрать вниз, а контент по ширине вытянуть на 100%. Для планшета сделать сайдбар тоже снизу, но по-красивее. Можно еще чего-нибудь намудрить в стилях и показывать тот или иной вид шаблона в зависимости от устройства с которого заходит пользователь.
Ну и получается, что можно не делать отдельный шаблон под мобильные устройства, а просто адаптировать основной шаблон.
|
| |
| |
