CSS Media Navrae: stap vir stap beskrywing, funksies en resensies

Eens op 'n tyd, diegene wat webtuistes besoek aan slimfone en soortgelyke mobiele toestelle wat veroorsaak ander net lag. Baie eenvoudig kon nie verstaan waarom dit nodig is, want daar is so 'n gemaklike rekenaars! Of, op sy ergste, skootrekenaars. Daarbenewens het die mobiele internet was toe duur.

Tyd verby. Internet is goedkoper. Die verkope het uitgekom meer en meer selfone en tablette. 'N geruime tyd later, die eienaars van die gewilde webwerwe verbaas krap sy kop. Volgens statistieke, het dit geblyk dat hul hulpbronne is meer geneig om hul slimfone besoek as met 'n stilstaande rekenaar!

In daardie tyd het die webwerwe is nie geskik vir vertoning op mobiele toestelle. Gaan die ou lewe op jou selfoon, sal jy tevrede wees met klein letters, klein menu items en knoppies ongemaklik te wees.

Die koms van CSS Media Navrae

Daar was 'n behoefte aan hulpbronne op te lê, sodat hulle goed lyk wanneer dit uit 'n skerm. Eerste versprei die praktyk van die stigting van aparte terreine vir elke grootte. Byvoorbeeld, besoekers wat 'n selfoon gebruik, kry jy op een hulpbron, en een wat "sit" met jou rekenaar - aan die ander kant. Maar dit was 'n lang, duur en ongerieflik.

Toe kom CSS3 Media Navrae. Saam met hulle het die blote moontlikheid van die implementering van dinamiese ontwerp.

Wat is dinamiese ontwerp?

Hierdie term word gebruik as die voorkoms van die hulpbron verander na gelang van die grootte van die skerm waarop dit op. Hoe om dit te verstaan? Dit is eenvoudig.

Stel jou voor dat jy 'n webwerf. In die boonste deel is daar 'n navigasie spyskaart. Horisontale. Dit strek oor die hele breedte van die bladsy. Onder wat is 'n blok met kontak inligting. Telefoon en adres ook gespasieer deur twee blokke en is horisontaal gereël langs mekaar. Onder hierdie blok - die inhoud, en op die linker-of die regterkant is die sidebar. Hieronder, soos gewoonlik, voet.

Hierdie "klassieke" uitleg diagram. Dit is ideaal vir 'n persoonlike rekenaar, maar nie te gerieflik vir selfone. Horisontale spyskaart is te wyd. Kontakte is ver geleë van mekaar. Om inligting uit die sidebar gebruik en al sal die skerm blaai, en dit is nie vir almal se smaak.

Die probleem kan opgelos word deur die gebruik van 'n aangepaste en mobiele ontwerp met CSS3 Media Navrae. Deur die gebruik van media navrae, ons rekonstrueer die ligging van die inhoud ... Nou is dit werk soos volg:

• top - eenheid met vertikale spyskaart navigasie,
• daaronder - die blok met kontakte, wat nou ook vertikaal geplaas word;
• sidebar inhoud word nie vertoon op die kant van tag inhoud, en bo dit.

Dit is 'n eenvoudige voorbeeld van wat gedoen kan word met Responsieve Web Design Media Navrae. In werklikheid 'n baie meer moontlikhede.

So, wat is die media navrae?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Onder CSS Media Navrae CSS3 verstaan die term module, waarmee jy kan maak die inhoud van die bladsy om aan te pas aan sekere voorwaardes. Byvoorbeeld, dit begin om te reageer op die skerm grootte, of geaardheid toestel (Portret / landskap).

As die stelsel verstaan dat die behoefte om die inhoud te verander? Dit maak gebruik van media navrae. Dit spesifiseer sekere parameters. As 'n toestel waaruit 'n besoeker het om die webwerf aan hierdie parameters, insluitend pre-voorskrif style. Hulle kan geskryf word as 'n totale CSS tafel, of in 'n aparte lêer.

CSS Media Navrae Browser Verenigbaarheid

Safari до Chrome. Alle moderne blaaiers ondersteun hierdie tegnologie, vanaf Safari Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Natuurlik, gebruikers van ouer weergawes van Internet Explorer het 'n probleem ... maar laat ons eerlik wees eerlik - diegene wat nog 'n ouer die IE, net oor enige iets kan probleme veroorsaak.

Sintaksis adaptive uitleg Media Navrae

html. Miskien het jy is blootgestel aan media navrae wanneer verbind die styl lêer te html. Onthou dat die lyn? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. =' text / css "href = http: // webwerf /article/320575/%E2%80%99style.css%E2%80%99%3E Soms aan die einde voeg 'n ander parameter, wat as gekyk: media = 'skerm'.

Dit is 'n media navraag! Hy dui aan dat die gespesifiseerde styl lêer sal werk op toestelle toegerus met TV's. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. In plaas daarvan, kan jy die skerm druk spesifiseer - in hierdie geval, is die style van die lêer toegepas, as die bladsy gedruk word.

Jy kan die volgende kenmerke te gebruik:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; al - universele weergawe, wat deur stilte, toegepas word in alle gevalle;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - skerms (rekenaars, skootrekenaars, tablette, slimfone en alles wat toegerus is met 'n vertoning);
• принтеры; Print - Printers;
• – проекторы; projeksie - projektor;
• – речевые браузеры; spraak - toespraak blaaier;
• – для устройств для слабовидящих; braille - toestelle vir gesiggestremde;
• – для экранов телевизоров. TV - vir TV-skerms.

Dit is nie al nie. , но они используются редко. Daar is verskeie bykomende CSS Media Navrae skryf, maar hulle is selde gebruik. all. Daarbenewens, het jy nie 'n parameter te spesifiseer - Default op alle.

Die struktuur van die media navrae

css. In plaas van die skep van 'n styl lêer, kan jy css kode gebruik. Dit lyk soos volg:

(тут будут стили } @ media skerm en (maksimum breedte: 1024px) {( daar style}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. Na @ media richtlijn, wat maak dit duidelik dat die media navraag gebruik, daar is 'n aanduiding van die tipe van toestel (skerm - die skerm) en addisionele parameters. Max Width. In hierdie voorbeeld, gebruik CSS Media Navrae Max Breedte eiendom. px. Dit beteken dat die in die draadjies gelys style betrokke sal wees, indien die gebruiker van die toestel skerm grootte as 1024 px. и and не обязательны. Skerm en en nie bindend. Jy kan dit skryf:

@ media (maksimum breedte: 1024px) {}

In so 'n geval, die eienskappe wat gebruik word op enige toestel, nie net diegene wat toegerus is met TV's.

Spesifiseer verskeie parameters

Veronderstel jy wil die reeks van verskeie toestelle wat gebruik sal word om die styl te kies beperk. px, но не больше 500 px. Kom ons sê jy wil die eienskappe van slegs diegene wat jou webwerf besoek van 'n smartphone te wys, die skerm grootte is nie minder nie as 320 px, maar nie meer as 500 px. In so 'n geval, die versoek in die vorm:

@ media (min-width: 320px) en (maksimum breedte: 500px) {}

and. As jy vertroud is met programmering is, NJ jy weet wat operateur toegepas en. Vir diegene wat nie weet nie: tjeks dit indien beide toestande is waar. E. Aktivering eiendomme in die navraag skerm moet nie minder as 320 en nie meer as 500 pixels wees.

and не ограничивается одним. En aantal operateurs is nie beperk tot een. Jy kan hulle soveel as wat jy wil sit. Byvoorbeeld, probeer om 'n sekere grootte skerms vir slimfone en heel anders te skep - vir televisies.

'N belangrike punt - die oriëntasie van die gebruiker toestel. Iemand op webtuistes op jou smartphone in portret oriëntasie, iemand - met die landskap. orientation:portrait, для вторых, соответственно, orientation:landscape. Vir die voormalige, sal jy 'n bykomende voorwaarde oriëntasie nodig: portret, vir die tweede, onderskeidelik, oriëntasie: landskap. @media. Hierdie lyne word ook getoon in hakies volgende @ media span. and. Jy kan hulle deel via en.

Nog 'n interessante nuanses. and вы вполне можете использовать оператор or. In plaas daarvan, en jy kan ook gebruik maak van die of-operateur. Hy moet ten minste een toestand in die versoek om waar te wees! Byvoorbeeld:

) {} @ media (maksimum breedte: 500px) of (geaardheid: portret) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. As die skerm is minder as 500 px of gebruik portret oriëntasie, sal die draadjies effek style neem.

Navraag nie vir fine-tuning

not. Die media navraag, kan jy die woord nie voeg. Dit word soos volg gedoen:

@ media (nie maksimum breedte: 700px ) {}

Eienskappe geaktiveer as die maksimum wydte is nie gelyk aan 700 pixels.

media funksies

Die navrae kan gebruik verskeie pre-gevestigde funksies. W3C. Raak vertroud met alles wat jy kan aanlyn W3C. Die meeste coders genoeg om die eienaar van die drie belangrikste:

• (о нем мы уже говорили); oriëntasie (ons reeds daaroor gepraat);
• (ширина, ее тоже упоминали); wydte (breedte, is dit ook genoem);
• (высота). hoogte (lengte).

Hoogte is selde gebruik, maar daar is 'n paar gevalle waar hierdie instelling van nut kan wees.

Hoe en waar om versoeke te plaas?

Baie web ontwerpers of ander manier het hulle aan die einde van lêer style. Byvoorbeeld, die eerste lys die belangrikste style, en dan, in die onderkant van die dokument, geplaas versoeke.

Dit is nie baie goed nie. Baie meer gerieflik om eienskappe vir verskillende toestelle te plaas direk na die hoof style. Byvoorbeeld, jy het 'n div, wat die rooi fontkleur stel:

div {

Rooi;

}

Onmiddellik na die versoek aandui:

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

Voorskryf eienskappe.

So 'n benadering sou omslagtig wees as jy "gebruik suiwer» css. Om die hulp van die voorverwerker. Hulle het 'n baie interessante geleenthede vir meer akkurate aansoek versoeke.

Nog 'n opsie - die plasing van eiendomme vir verskillende toestelle in verskillende style lêers. Dit is veral nuttig as jy 'n voorverwerker richtlijn te gebruik om die invoer. Die resultaat is 'n maklik om te wysig, skoon-kode.

Watter een om te gebruik? Dit hang alles af van persoonlike voorkeure en eienskappe van die span. Miskien, in die plek van jou werk het 'n sekere manier van die plasing van media navrae sal aanvaar word nie.

Moet ook nie vergeet dat jy jou lewe kan vereenvoudig met die nuutste sagteware. Dit gaan nie net oor die voorverwerker. Met Gulp Groep CSS Media Navrae kan die proses baie makliker maak. Aanbeveel om hierdie instrument of enige van sy analoë te bemeester.