КампутарыПраграмаванне

CSS Media Queries: пакрокавае апісанне, асаблівасці і водгукі

Калісьці тыя, хто наведваў вэб-сайты са смартфонаў і аналагічных мабільных прылад, выклікалі ў навакольных толькі смех. Многія проста не маглі зразумець, навошта гэта трэба, бо ёсць такія зручныя стацыянарныя кампутары! Або, на горшы выпадак, ноўтбукі. У дадатак, мабільны інтэрнэт тады каштаваў дорага.

Час ішоў. Інтэрнэт таннеў. У продаж выходзіла ўсё больш тэлефонаў і планшэтаў. Некаторы час праз ўладальнікі папулярных сайтаў азадачана чухалі галовы. Па статыстыцы выходзіла, што іх рэсурсы часцей наведваюць са смартфонаў, чым са стацыянарных ПК!

У тыя часы сайты не былі аптымізаваныя для прагляду з мабільных прылад. Зайшоўшы на стары рэсурс з тэлефона, вам прыйшлося б здавольвацца маленькімі літарамі, дробнымі пунктамі меню і нязручнымі кнопкамі.

З'яўленне CSS Media Queries

Паўстала неабходнасць вярстаць рэсурсы так, каб яны добра выглядалі пры праглядзе з любога экрана. Спачатку распаўсюдзілася практыка стварэння асобных сайтаў пад кожны памер. Напрыклад, наведвальнік, які карыстаўся мабільным тэлефонам, трапляў на адзін рэсурс, а той, што «сядзеў» з кампутара - на іншы. Але гэта было доўга, дорага і нязручна.

Затым паўсталі CSS3 Media Queries. З іх дапамогай з'явілася простая магчымасць рэалізацыі дынамічнага дызайну.

Што такое дынамічны дызайн?

Гэты тэрмін выкарыстоўваецца, калі знешні выгляд рэсурсу змяняецца ў адпаведнасці з памерамі экрана, на якім яго праглядаюць. Як гэта зразумець? Усё проста.

Уявіце, што ў вас ёсць сайт. У верхняй яго частцы размешчана меню навігацыі. Гарызантальнае. Яно расцягваецца на ўсю шырыню старонкі. Пад ім знаходзіцца блок з кантактнай інфармацыяй. Тэлефон і адрас таксама разнесеныя па двух блоках і размешчаны гарызантальна, побач адзін з адным. Пад гэтым блокам - асноўны кантэнт, а злева ці справа размясціўся сайдбар. Унізе, як водзіцца, футер.

Гэта «класічная» схема размяшчэння кампанентаў. Яна выдатна падыходзіць для персанальнага кампутара, але не занадта зручная для мабільных тэлефонаў. Гарызантальнае меню занадта шырокае. Кантакты размясціліся далёка адзін ад аднаго. Для выкарыстання інфармацыі з сайдбар і зусім прыйдзецца скролла экран, а гэта не ўсім падабаецца.

Праблему можна вырашыць, выкарыстоўваючы адаптыўны і мабільны дызайн з CSS3 Media Queries. З дапамогай медиазапросов мы перабудоўваем размяшчэнне кантэнту ... Зараз усё працуе так:

  • уверсе - блок з вертыкальным навігацыйным меню;
  • пад ім - блок з кантактамі, якія зараз таксама размяшчаюцца вертыкальна;
  • кантэнт сайдбар адлюстроўваецца не па баках ад змесціва тэга
    , а НАД ім.

Гэта найпросты прыклад таго, што можна зрабіць з дапамогай Responsive Web Design Media Queries. На самай справе магчымасцяў куды больш.

Дык што ж такое медиазапросы?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Пад тэрмінам CSS Media Queries разумеюць модуль CSS3, з дапамогай якога можна прымусіць кантэнт старонкі адаптавацца да пэўных умоў. Напрыклад, ён пачынае рэагаваць на памер экрана, або на арыентацыю прылады (партрэтная / ландшафтная).

Як сістэма разумее, што трэба мяняць кантэнт? Для гэтага выкарыстоўваюцца медиазапросы. У іх паказваюцца пэўныя параметры. Калі прылада, з якога наведвальнік зайшоў на сайт, адпавядае гэтым параметрах, ўключаюцца загадзя прапісаныя стылі. Іх можна пісаць як у агульнай табліцы CSS, так і ў асобным файле.

Сумяшчальнасць CSS Media Queries з браўзэрамі

Safari до Chrome. Усе сучасныя браўзэры падтрымліваюць гэтую тэхніку, ад Safari да Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Вядома, у карыстальнікаў старых версій Internet Explorer паўстануць праблемы ... Але давайце прызнаем шчыра - у тых, хто да гэтага часу карыстаецца старымі IE, літаральна ўсё можа выклікаць праблемы.

Сінтаксіс адаптыўнай вёрсткі Media Queries

html. Магчыма, вы ўжо сутыкаліся з медиазапросами, калі падлучалі файл стыляў у html. Памятаеце гэты радок? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. Часам у канец дадаецца яшчэ адзін параметр, які выглядаў так: media = 'screen'.

Гэта і ёсць медиазапрос! Ён азначае, што ўказаны стылёвай файл будзе працаваць на абсталяваных экранам прыладах. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. Замест screen можна паказаць print - у такім выпадку стылі з файла прымяняюцца, калі старонка выводзіцца на друк.

Можна выкарыстоўваць наступныя атрыбуты:

  • – универсальный вариант, используется по молчанию, применяется во всех случаях; all - універсальны варыянт, выкарыстоўваецца па маўчання, ужываецца ва ўсіх выпадках;
  • – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - экраны (кампутары, ноўтбукі, планшэты, смартфоны і ўсё, што абсталяванае дысплеем);
  • принтеры; print - друкаркі;
  • – проекторы; projection - праектары;
  • – речевые браузеры; speech - маўленчыя браўзэры;
  • – для устройств для слабовидящих; braille - для прылад для слабавідушчых;
  • – для экранов телевизоров. tv - для экранаў тэлевізараў.

Гэта не ўсё. , но они используются редко. Маецца некалькі дадатковых атрыбутаў CSS Media Queries, але яны выкарыстоўваюцца рэдка. all. У дадатак, можна наогул не ўказваць параметр - па змаўчанні ўключыцца all.

структура медиазапроса

css. Замест таго каб стварыць стылявога файла можна выкарыстоўваць код css. Ён выглядае так:

(тут будут стили } @media screen and (max-width: 1024px) {(тут будуць стылі}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. Пасля дырэктывы @media, якая дае зразумець, што будзе выкарыстоўвацца медиазапрос, ідзе ўказанне тыпу прылады (screen - экран) і дадатковыя параметры. Max Width. Ва ўказаным прыкладзе ўжываецца ўласцівасць CSS Media Queries Max Width. px. Гэта значыць, што названыя ў фігурных дужках стылі будуць задзейнічаны, калі памер экрана прылады карыстальніка не перавышае 1024 px. и and не обязательны. Screen і and не абавязковыя. Вы можаце напісаць так:

@media (max-width: 1024px) {}

У такім выпадку ўласцівасці будуць выкарыстоўвацца на любых прыладах, а не толькі на тых, што аснашчаны экранам.

Ўказанне некалькіх параметраў

Выкажам здагадку, вы хочаце некалькі абмежаваць круг прылад, на якіх будуць прымяняцца выбраныя стылі. px, но не больше 500 px. Скажам, вы жадаеце дэманстраваць ўласцівасці толькі тым, хто наведвае ваш сайт са смартфона, памер экрана якога не менш 320 px, але не больш за 500 px. У такім выпадку запыт прымае наступны выгляд:

@media (min-width: 320px) and (max-width: 500px) {}

and. Калі вы знаёмыя з праграмаваннем, nj ведаеце, для чаго ўжываецца аператар and. Для тых, хто не ў курсе: ён правярае, ці з'яўляюцца праўдзівымі абодва ўмовы. Т. е. Для актывацыі уласцівасцяў ў запыце экран павінен быць не менш за 320 і не больш за 500 пікселяў.

and не ограничивается одним. Колькасць аператараў and не абмяжоўваецца адным. Вы можаце ставіць іх роўна столькі, колькі захочаце. Напрыклад, паспрабуйце стварыць пэўныя памеры для экранаў смартфонаў і зусім іншыя - для тэлевізараў.

Важны момант - арыентацыя прылады карыстача. Хтосьці праглядае сайты са смартфона з партрэтнай арыентацыі, хтосьці - з ландшафтнай. orientation:portrait, для вторых, соответственно, orientation:landscape. Для першых спатрэбіцца дадатковая ўмова orientation: portrait, для другіх, адпаведна, orientation: landscape. @media. Гэтыя радкі таксама паказваюцца ў дужках пасля каманды @media. and. Можна падзяляць іх з дапамогай and.

Яшчэ адзін цікавы нюанс. and вы вполне можете использовать оператор or. Замест and вы цалкам можаце выкарыстоўваць аператар or. Яму трэба, каб хоць адна ўмова ў запыце меў сапраўдную! напрыклад:

) {} @media (max-width: 500px) or (orientation: portrait) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. Калі экран менш 500 px АБО выкарыстоўваецца партрэтная арыентацыя, стылі ў фігурных дужках пачнуць дзейнічаць.

Ключавое слова not для больш тонкай налады

not. У медиазапрос можна ўставіць слова not. Гэта робіцца так:

@media (not max-width: 700px) {}

Ўласцівасці актывуюцца, калі максімальная шырыня не роўная 700 пікселям.

Медиафункции

У запытах можа выкарыстоўвацца некалькі загадзя створаных функцый. W3C. Азнаёміцца з усімі вы можаце на сайце W3C. Большасці вярстальшчыкі дастаткова валодаць трыма галоўнымі:

  • (о нем мы уже говорили); orientation (пра яго мы ўжо казалі);
  • (ширина, ее тоже упоминали); width (шырыня, яе таксама згадвалі);
  • (высота). height (вышыня).

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

Як і дзе размяшчаць запыты?

Многія вярстальшчыкі чамусьці змяшчаюць іх у самы канец файла стыляў. Напрыклад, спачатку пералічваюцца асноўныя стылі, а потым, у ніжняй частцы дакумента, размяшчаюцца запыты.

Гэта не вельмі добра. Значна зручней размяшчаць ўласцівасці для розных прылад прама пасля асноўных стыляў. Напрыклад, у вас ёсць div, якому зададзены чырвоны колер шрыфта:

div {

color: red;

}

Адразу пасля яго паказваем запыт:

@media (min-width: 320px) {}

Прапісваем ўласцівасці.

Такі падыход будзе грувасткім, калі выкарыстоўваецца «чысты» css. На дапамогу прыходзяць препроцессора. У іх ёсць нямала цікавых магчымасцяў для больш акуратнага прымянення запытаў.

Яшчэ адзін варыянт - размяшчэнне уласцівасцяў для розных прылад у розных стылявых файлах. Гэта асабліва зручна, калі вы карыстаецеся дырэктыву import препроцессора. У выніку атрымліваецца зручны для рэдагавання, чысты код.

Які варыянт выкарыстоўваць? Усё залежыць ад асабістых пераваг і асаблівасцяў працы каманды. Магчыма, у месцы вашай працы ўжо будзе прыняты пэўны спосаб размяшчэння медиазапросов.

Таксама не забывайце, што вы можаце спрасціць сабе жыццё з дапамогай найноўшых праграмных сродкаў. Гаворка ідзе не толькі аб препроцессора. З дапамогай Gulp Group CSS Media Queries можна зрабіць працэс значна зручней. Рэкамендуем асвоіць гэты інструмент або якой-небудзь з яго аналагаў.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 be.birmiss.com. Theme powered by WordPress.