CSS Media Queries: stap foar stap beskriuwing, eigenskippen en resinsjes

Once upon a time, dejingen dy't besite websiden te smartphones en ferlykbere mobile apparaten dy't feroarsaakje oaren allinnich laitsjen. In protte gewoanwei koe net begripe wêrom dit is nedich, omdat der sa'n noflik buroblêd kompjûters! Of, at slimste, in skoatkompjûter brûke. Boppedat, de mobile ynternet doe wie djoer.

Tiid slagge. Ynternet waard goedkeaper. De ferkeap kaam út mear en mear telefoans en tablets. In skoftke letter, de eigners fan populêre sites puzzled krassen syn holle. Neffens statistiken, die bliken dat harren middels binne mear kâns om te besykje harren snoadfoans dan mei in Stationary PC!

Op dat stuit de siden noch net optimalisearre om te sjen op mobile apparaten. Going oan it âlde libben op jo tillefoan, dan soe moatte wêze ynhâld mei lytse letters, lytse menu items en knoppen oncomfortabel.

De komst fan CSS Media Queries

Der wie ferlet te lizzen boarnen sadat se sjogge goed as besjoen út alle skerm. Earst ferspriede de praktyk it fêstigjen fan aparte plakken foar elke maat. Bygelyks, besikers dy't gebrûk meitsje fan in mobile telefoan, krije jo op ien boarne, en ien dat is "sitten" mei jo kompjûter - oan 'e oare. Mar it wie in lange, djoer en onhandig.

Doe kaam CSS3 Media Queries. Mei harren kaam it inkele mooglikheid fan 'e útfiering fan dynamyske design.

Wat is dynamysk design?

Dy term wurdt brûkt as it uterlik fan de boarne feroaret neffens de grutte fan it skerm dy't neffens it browsen. Hoe te begripen dit? It is simpel.

Yntinke dat jo in webside. Yn syn boppeste part is der in navigaasje menu. Horizontaal. It rint oer de hiele breedte fan de side. Hjirûnder dat is in blok mei de kontakt ynformaasje. Tillefoan en adres ek ôfstannen fan elkoar troch twa blokken en binne oardere horizontaal grinzjend oan elkoar. Under dit blok - de wichtichste ynhâld, en op 'e lofts of rjochts is de sydbalke. Hjirûnder, lykas wenst, foettekst.

Dat "klassike" layout diagram. It is perfekt foar in persoanlike kompjûter, mar net al te handich foar mobile tillefoans. Horizontale menu is te breed. Kontakten lizze fier fan elkoar. Te brûken ynformaasje út de sydbalke en allegearre sille moatte foar it skowen fan it skerm, en it is net oan eltsenien syn smaak.

It probleem oplost wurde kin troch it brûken fan in adaptieve en mobile ûntwerp mei CSS3 Media Queries. Troch help fan media fragen, wy te rekonstruearjen de lokaasje fan de ynhâld ... No is it wurket like this:

• top - ienheid mei fertikale navigaasje menu;
• ûnder it - it blok mei kontakten, dy't no ek pleatst fertikaal;
• De sydbalke ynhâld wurdt net werjûn oan 'e kant fan tag ynhâld, en boppe him.

Dit is in ienfâldige foarbyld fan wat kin dien wurde mei Responsive Web Design Media Queries. Yn feite folle mear mooglikheden.

Dus wat is de media queries?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Under CSS Media Queries CSS3 begripe de term module, dêrmei kinst meitsje de ynhâld fan de side oan te passen oan bepaalde betingsten. Bygelyks, it begjint te spyljen op it skerm grutte, of oriïntaasje apparaat (portret / lânskip).

As it systeem begrypt dat it ferlet om te feroarjen de ynhâld? It brûkt media queries. Se oantsjutte bepaalde parameters. As in apparaat út dêr't in besiker kaam ta de site foldocht oan dizze parameters, ynklusyf pre-prescription stilen. Se kinne skreaun wurde as in totale CSS tafel, of yn in apart triem.

CSS Media Queries Browser Compatibility

Safari до Chrome. Alle moderne blêders stypje dizze technology, fan Safari nei Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Fansels, brûkers fan âldere ferzjes fan Ynternet Explorer hawwe in probleem ... mar litte wy foar stean dat eerlijk - dyjingen, dy't noch altyd mei help fan âldere de IE, krekt oer alles kin foar problemen soargje.

Syntax Adaptive layout Media Queries

html. Miskien Jo binne bleatsteld oan media fragen doe't ferbûn de styl triem oan html. Tink der om dat line? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. = 'tekst / css' href = http: // site /article/320575/%E2%80%99style.css%E2%80%99%3E Soms oan 'e ein foeget in oare parameter, dy't seach as: media = 'screen'.

Dit is in media query! Hy jout oan dat de oantsjutte styl triem sil wurkje oan apparaten útrist mei tv. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. Ynstee, kinne jo oanjaan skerm print - yn dit gefal, de stilen fan de triem wurde tapast, as de side wurdt printe.

Jo kinne brûk meitsje fan de folgjende attributes:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; all - universele ferzje, brûkt troch de stilte, wurdt tapast yn alle gefallen;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - screens (kompjûters, laptops, tablets, smartphones, en al dat wurdt foarsjoen fan in display);
• принтеры; print - Printers;
• – проекторы; projeksje - projector;
• – речевые браузеры; speech - speech browsers;
• – для устройств для слабовидящих; braille - apparaten foar blinen;
• – для экранов телевизоров. tv - foar TV screens.

Dat is net alles. , но они используются редко. Der binne ferskate ekstra CSS Media Queries attributen, mar se wurde komselden brûkt. all. Boppedat, jo der gjinien oantsjutte in parameter - Default op alles.

De struktuer fan 'e media queries

css. Yn stee fan it meitsjen fan in styl triem, kinne jo brûke CSS koade. It sjocht der sa út:

(тут будут стили } @media skerm en (max-width: 1024px) {( der binne styles}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. Nei @media rjochtline, dy't makket dat dúdlik dat de media query brûkt wurdt, is der in yndikaasje fan it type apparaat (skerm - it skerm) en ekstra parameters. Max Width. Yn dit foarbyld, brûk CSS Media Queries Max Breedte eigendom. px. Dat betsjut dat de stilen neamd yn de blokheakjes sille wurde belutsen, as de brûker fan it apparaat skerm grutte dan 1024 px. и and не обязательны. Skerm en en net binend. Jo kinne skriuwe dit:

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

Yn sa'n gefal, de eigenskippen wurde brûkt op alle apparaat, net krekt dyjingen dy't útrist mei tv.

Oantsjutte meardere parameters

Stel jo wolle beheine it berik fan bepaalde apparaten dy 'sil brûkt wurde om' e styl. px, но не больше 500 px. Litte we sizze jo sjen litte wolle de eigenskippen fan allinnich dyjingen, dy't der nei dyn site fan in smartphone, it skerm grutte is net minder as 320 px, mar net mear as 500 px. Yn sa'n gefal, it fersyk nimt de foarm:

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

and. As jo binne bekend mei programmearring, jim nj witte wat operator wurdt tapast en. Foar dyjingen dy't net witte: dat kontrolearret oft beide betingsten binne wier. E. aktivearje eigenskippen yn de query skerm moat wêze net minder as 320 en net mear as 500 pixels.

and не ограничивается одним. En oantal ûndernimmers is net beheind ta ien. Jo kinne sette se safolle as jo wolle. Bygelyks, besykje te meitsjen fan in bepaalde grutte skermen foar smartphones en hiel oars - foar de tv.

In wichtich punt - de oriïntaasje fan de brûker apparaat. Immen browsing websites op jo snoadfoan yn portret oriïntaasje, immen - mei it lânskip. orientation:portrait, для вторых, соответственно, orientation:landscape. Foar de eardere, jo moatte in ekstra betingst oriïntaasje: portret, foar de twadde, respektivelik, oriïntaasje: lânskip. @media. Dy linen wurde ek sjen litten tusken heakjes folgjende @media ploech. and. Jo kinne diele se fia en.

In oare nijsgjirrige nuânse. and вы вполне можете использовать оператор or. Ynstee, en jo kinne ek gebrûk meitsje fan de of operator. Hy moat yn elts gefal ien kondysje yn it fersyk om wier wêze! Bygelyks:

) {} @media (max-width: 500px) of (oriïntaasje: portrait) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. As it skerm is minder as 500 px of gebrûk portret oriïntaasje, de blokheakjes sille nimme effekt stilen.

Keyword net foar goede-tuning

not. De media query, kinne jo ynfoegje it wurd net. Dit wurdt dien as folget:

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

Eigenskippen binne aktivearre as de maksimale breedte is net gelyk oan 700 pixels.

media features

De fragen kinne brûkt wurde ferskate foar fêstleine funksjes. W3C. Yn'e kunde te kommen mei al jo kinne online W3C. De measte coders genôch om sels de trije wichtichste:

• (о нем мы уже говорили); oriïntaasje (wij al praat oer it);
• (ширина, ее тоже упоминали); breedte (breedte, it wurdt ek neamd);
• (высота). hichte (hichte).

Hichte wurdt komselden brûkt, mar der binne in pear gefallen wêryn dizze ynstelling kin nuttich wêze.

Hoe en wêr't te pleatsen fersiken?

In soad web ontwerpers of oare manier sette se oan 'e ein fan triem stilen. Bygelyks, de earste steane de wichtichste stilen, en dan, yn 'e boaiem fan it dokumint, pleatste fersiken.

Dit is net hiel goed. Folle handiger om te pleatsen eigenskippen foar ferskate apparaten rjocht nei de wichtichste stilen. Bygelyks, Jo hawwe in div, dy't sette de reade lettertype kleur:

div {

color: red;

}

Fuort nei it fersyk jout:

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

Prescribes eigenskippen.

Sa'n oanpak soe wêze omslachtig as jo "suver» CSS. Om help fan 'e preprocessor. Se hawwe in soad nijsgjirrige mooglikheden foar krekter programma fersiken.

In oare opsje - pleatsen eigenskippen foar ferskillende apparaten yn ferskillende styl triemmen. Dit is foaral brûkber as jo brûke in preprocessor rjochtline om te ymportearjen. It resultaat is in maklik te bewurkjen, skjinne koade.

Hokker Ien to brûke? It alles hinget ôf fan persoanlike foarkarren en skaaimerken fan 'e ploech. Faaks, op it plak fan jo wurk hat in bepaalde manier fan pleatsen media fragen sille wurde akseptearre.

Ek net ferjitte dat jo kinne simplify dyn libben mei de nijste software. It is net allinnich oer it preprocessor. Mei Gulp Group CSS Media Queries kin om it proses folle makliker. Rekommandearre om behearskje dit ynstrumint of ien fan syn analogs.