Главная » Файлы » Прочие скрипты » CSS
Адаптивный дизайн или как работать с @media в css - микроурок от Apocalypse
14.10.14, 09:20:55



Всем доброго времени суток! Тема старая, давно многими уже давно изученная, но всё же я решил сделать этот мини-урок для тех, кто ещё никогда не сталкивался с вёрсткой адаптивного дизайна и не собирался заострять на этом внимание - а зря... Если ещё год тому назад процент посещения сайта apo-ucoz с мобильных устройств и планшетов был невелик, то сегодня этот процент чуть ли не выше, чем посещение с обычных ПК

Так как я решил кардинально переписывать дизайн для адаптации под мобильные и планшеты, и остальным веб-дизайнерам, которые ещё не задумывались о модернизации своих сайтов, данная статья будет полезна

По сути, всё не так страшно, как могло показаться. Нам на помощь приходит чудесное свойство @media, которое поможет нам играться стилями в прямой зависимости от разрешения экрана посетителя сайта

Вот вам очень простой ПРИМЕР, который я накидал, дабы продемонстрировать, как незначительными манипуляциями со свойствами класса элемента можно простой блок оптимизировать под, к примеру, смартфон. Просто пробуйте уменьшить размер области предпросмотра и увидите, как блок сожмётся и текст в нём изменится

Короче, посмотрите на вот такой css код:
Код
.apodiv {
width:800px;
}
Данный код говорит нам, что у элемента с классом apodiv стандартная ширина 800 пикселей. Нам, к примеру, нужно, чтобы у этого элемента ширина была 200 пикселей, если разрешение экрана меньше 400 пикселей, для этого в самом низу нашего css добавим:
Код
@media screen and (max-width: 400px) {
  .apodiv {
  width:300px;
  }
}


Также вы можете выстраивать цепочку из условий, чтобы для нескольких стандартных разрешений экрана элементы отображались по своему. Условия располагайте в порядке убывания - от самого большого разрешения до минимального Пример:
Код
@media screen and (max-width: 800px) {
  .apodiv {
  width:700px;
  }
}  

  @media screen and (max-width: 500px) {
  .apodiv {
  width:400px;
  }
}[  

  @media screen and (max-width: 400px) {
  .apodiv {
  width:300px;
  }
}


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

Если у вас остались вопросы - задайте их в комментариях

Статья подготовлена Apocalypse
Категория: CSS | Добавил: Apocalypse | Теги: CSS, или, адаптивный, Apocalypse, Дизайн, @media, работать, Как, От, микроурок
Просмотров: 775 | Загрузок: 0 | Комментарии: 11 | Рейтинг: 1.0/1
Всего комментариев: 11
0
8 [ЦИТИРОВАТЬ]   [Материал]
Кстати, говоря про отдельные стили для смартфонов: для атрибута link так же есть тег media, в котором можно так же прописать что-либо, например:
<link media="only screen and (max-width: 640px)" rel="stylesheet" href="mobile.css">
<link media="screen and (max-width: 640px)" rel="stylesheet" href="mobile.css">
<link media="(max-width: 640px)" rel="stylesheet" href="mobile.css">

0
9 [ЦИТИРОВАТЬ]   [Материал]
Один файл грузится быстрее, чем группа отдельных файлов

0
10 [ЦИТИРОВАТЬ]   [Материал]
Да я и не спорю, просто написал для тех, кому будет это интересно. Жаль, что этого нет в самой статье.

0
11 [ЦИТИРОВАТЬ]   [Материал]
Не зря же я дал название "микроурок"  biggrin

0
6 [ЦИТИРОВАТЬ]   [Материал]
Апо, т.к. работники козы в очередной раз угробили работу жаваскрипта на ФФ, то напишу в отдельном комменте.
Я говорил не про минимальную и максимальную ширину элементов, а про минимальную и максимальную ширину экрана, которую ты прописывать в @media-условии.
@media screen and (max-width: 400px)

0
7 [ЦИТИРОВАТЬ]   [Материал]
Всё, въехал, о чём ты smile

0
3 [ЦИТИРОВАТЬ]   [Материал]
А не лучше ли вообще сверстать отдельно дизайн для смартфонов ?

0
4 [ЦИТИРОВАТЬ]   [Материал]
Что проще - прописать в css несколько строчек кода или верстать отдельный дизайн?  cool

0
2 [ЦИТИРОВАТЬ]   [Материал]
И если использовать min-width, то ставить разрешения надо в порядке возрастания smile

0
1 [ЦИТИРОВАТЬ]   [Материал]
Упс. Мои ошибки были. Главное - не указывать одинаковые числа для min-width и max-width.
Ибо там условия вот такие:
min-width: If [device width] is greater than or equal to [specified #], then do {...}
max-width: If [device width] is less than or equal to [specified #], then do {...}

0
5 [ЦИТИРОВАТЬ]   [Материал]
Min и Max не дают полного контроля. Ты всего лишь с шириной элемента играешься. С @media ты можешь задавать абсолютно любые css свойства для нужных разрешений экрана

Имя *:
Email: