Сінтаксіс для запытаў і мін-шырыня і максімальная шырыня-медыя
Адаптыўны вэб - дызайн з'яўляецца падыход да стварэння вэб - старонак , дзе гэтыя старонкі могуць дынамічна змяняць іх размяшчэнне і вонкавы выгляд у залежнасці ад памеру экрана наведвальніка . Вялікія экраны могуць атрымаць макет падыходзіць для тых вялікіх дысплеяў у той час як меншыя прылады, такія як мабільныя тэлефоны, можна атрымаць той жа сайт, адфарматаваны такім чынам, што падыходзіць для гэтага меншага экрана. Такі падыход забяспечвае лепшы карыстацкі досвед для ўсіх карыстальнікаў , і гэта можа нават дапамагчы палепшыць ранжыраванне пошукавай машыны . Важнай часткай адаптыўнага вэб-дызайну CSS Media Queries.
Медыя-запыты, як маленькія ўмоўныя аператары ўнутры файла CSS вашага сайта, што дазваляе ўсталяваць пэўныя правілы CSS, якія толькі ўступілі ў сілу, як толькі задуманае ўмова выконваецца - напрыклад, калі памер экрана вышэй або ніжэй пэўных парогавых значэнняў.
Медыя-запыты ў дзеянні
Так як жа выкарыстоўваць медыя-запыты на вэб-сайце? Вось вельмі просты прыклад:
- Вы б пачаць з добра структураваным HTML дакументам, вольным ад якіх-небудзь візуальных стыляў (гэта значыць тое, што CSS для)
- У файле CSS, вы б пачаць, як вы звычайна робіце на стылізацыі старонкі і налада базавага ўзроўню для таго, як сайт будзе выглядаць. Дапусцім, вы хацелі памер шрыфта старонкі, каб быць 16 пікселяў, вы маглі б напісаць гэты CSS: цела {памер шрыфта: 16px; }
- Цяпер вы можаце павялічыць гэты памер шрыфта для вялікіх экранаў, якія маюць дастаткова нерухомасць, каб зрабіць гэта. Тут медиазапросы штурхель Вы б пачаць медыя-запыт, як гэта :. @media экран і (мін-шырыня: 1000px) {}
- Гэта сінтаксіс медыя-запыту. Яна пачынаецца з @media, каб усталяваць сам Медыя запыт. Далей вы ўсталюеце «тып носьбіта», які ў дадзеным выпадку з'яўляецца «экран». Гэта адносіцца і да настольных кампутарных экранаў, планшэты, тэлефонах і г.д. І, нарэшце, пакласці канец Медыя запыту з «функцыяй медыя». У нашым прыкладзе вышэй, гэта значыць «сярэдзіна шырыня: 1000px». Гэта азначае, што медыя-запыту будзе ўдар у для дысплеяў з мінімальнай шырынёй 1000 пікселяў у шырыню.
- Пасля гэтых элементаў медыя-запыт, неабходна дадаць адкрывалую і якая зачыняе фігурную дужку, падобную на тое, што вы маглі б зрабіць у любой нармальнай правіле CSS.
- Апошнім крокам да медыя-запыту з'яўляецца даданне правілы CSS, якія вы хочаце ўжыць як толькі гэта ўмова выканана. Вы складаеце гэтыя правілы CSS у фігурныя дужкі, якія складаюць медыя-запыт, як гэта: @media экран і (мін-шырыня: 1000px) {цела {памер шрыфта: 20px; }
- Калі ўмовы СМІ запыту будуць выкананы (у акне браўзэра, па меншай меры 1000 пікселяў ў шырыні), гэты CSS стыль ўступіць у сілу, змяненне памеру шрыфта нашага сайта з 16 пікселяў мы ўсталявалі, першапачаткова наша новае значэнне 20 пікселяў.
Даданне дадатковых стыляў
Вы можаце размясціць столькі правілаў CSS у гэтым медыя-запыту, як трэба наладзіць знешні выгляд вашага сайта. Напрыклад, калі вы хочаце, каб не толькі павялічыць памер шрыфта 20 пікселяў, але і змяніць колер ўсіх пунктаў у чорны (# 000000), можна дадаць наступнае:
@media экрана і (мін-шырыня: 1000px) {цела {памер шрыфта: 20px; } Р {колер: # 000000; }}Даданне дадатковых медиазапросов
Акрамя таго, вы можаце дадаць больш медиазапросов для кожных вялікіх памераў, дадаўшы іх у табліцу стыляў, як гэта:
@media экрана і (мін-шырыня: 1000px) {цела {памер шрыфта: 20px; } Р {колер: # 000000; {} @media экран і (мін-шырыня: 1400px) {цела {памер шрыфта: 24px; }}Першы Media Queries будзе ўдар у на 1000 пікселяў у шырыню, змяненне памеру шрыфта 20 пікселяў. Затым, калі браўзэр быў вышэй 1400 пікселяў, памер шрыфта зменіцца зноў 24 пікселяў. Вы можаце дадаць столькі медиазапросы, колькі неабходна для канкрэтнага сайта.
Мін шырыня і Макс-Width
Існуе два спосабу запісу медыя запытаў - з дапамогай «мін-шырыню» або з «максімальнай шырынёй». Да гэтага часу мы бачылі «мін-шырыня» у дзеянні. Гэта прыводзіць да таго, што запыты СМІ ўступілі ў сілу, як толькі браўзэр дасягнуў па меншай меры, мінімальнай шырыні. Такім чынам, запыт, які выкарыстоўвае «мін-шырыня: 1000px» будзе прымяняцца, калі браўзэр не менш за 1000 пікселяў у шырыню. Гэты стыль медыя-запыт выкарыстоўваецца, калі вы ствараеце сайт у «мабільнай першай» манеры.
Калі вы выкарыстоўваеце "максімальную шырыню», ён працуе ў зваротным парадку. Медыя запыт аб «максімальнай шырыні: 1000px» будзе прымяняцца пасля таго, як браўзэр ўпаў ніжэй гэтага памеру.
Што тычыцца больш старых браўзэраў
Адна з праблем, з медыя-запытаў з'яўляецца адсутнасць падтрымкі ў старых версіях на Internet Explorer. Да шчасця, ёсць polyfills даступныя , якія могуць залатаць падтрымку медыя - запытаў у гэтых старых браўзэрах, што дазваляе выкарыстоўваць іх на вэб - сайтах сёння і пры гэтым гарантуючы , што дысплей гэтага сайта не выглядае зламаныя ў больш старое праграмнае забеспячэнне браўзэра.
Пад рэдакцыяй Джэрэмі Girard на 1/24/17