CSS Media kontsultak: urratsez urrats deskribapena, ezaugarriak eta berrikuspen arabera

Bazen behin, bisitatzen duten webgune horiek telefonoentzako eta eragiten duten beste batzuk bakarrik barre antzeko gailu mugikorrak. Askok, besterik gabe, ezin da ulertu zergatik beharrezkoa da, ez dago desktop eroso esaterako ordenagailuak delako! Edo, txarrena, ordenagailu eramangarriak. Gainera, Internet mugikorra gero garestia zen.

Denbora igaro zen. Internet merkeagoa zen. salgai atera zen, gero eta gehiago telefono eta pilulak. Batzuk geroago, herri-guneen jabeek harrituta bere burua scratching. Estatistiken arabera, euren baliabide gehiago egongo dira geldi PC batekin baino, telefonoan bisitatzeko agertu da!

Garai hartan guneak ez dira gailu mugikorrean ikusteko optimizatuta. telefonoan bizitza zaharra joatean, edukia hizki txikiak, menu txiki elementuak eta botoiak deseroso egon behar zenuke.

CSS Media kontsultak etorrerak

Ez dago baliabide inposatu nahi da, beraz, itxura ona dute inolako pantaila ikusita beharra zegoen. Lehen zabaldu tamaina bakoitzerako guneak bereizi ezarriz praktikan. Adibidez, telefono mugikor bat erabiltzen duten bisitariei, baliabide bat, eta beste bat ordenagailuari batekin "eserita" on you get - bestetik. Baina luzea, garestia eta deserosoa zen.

Ondoren etorri zen CSS3 Media kontsultak. Haiekin batera diseinu dinamikoa ezartzeko aukera hutsa zen.

Zer da diseinu dinamikoa?

Epe hau erabiltzen da baliabide itxura pantailan horien gainean arakatzen tamainaren arabera aldatzen bada. Nola hau ulertzeko? Erraza da.

Imajinatu webgune bat duzula. haren goiko zatian dago nabigazio menu bat da. Horizontala. zabaltzen orriaren zabalera osoan zehar ere. Horren azpian harremanetarako informazioarekin bloke bat da. Telefono eta helbide gainera, bi bloke arabera bananduta eta horizontalki antolatu dira, bata bestearen ondoan. Bloke honetan Under - eduki nagusira, eta ezkerreko edo eskuineko alboko barran dago. Jarraian, ohi, footer gisa.

Hau "klasikoa" diseinua diagrama. ordenagailu pertsonal bat ezin hobea da, baina ez gehiegi telefono mugikorrak komenigarria da. menu horizontala handiegia da. Kontaktu urrun kokatzen dira elkarrengandik. sidebar informazioa erabiltzeko eta guztiak pantailan mugitzeko aukera izango dute, eta ez da denen gustura da.

Arazoa egon CSS3 Media kontsultak Diseinu moldatzaile eta mugikor bat erabiliz konpon daitezke. media kontsultak erabiliz, edukiaren kokalekua berreraikitzeko dugu ... Orain obra hau atsegin du:

• goi - nabigazio bertikala menu batera unitatea;
• azpian - kontaktuak, zein dira gaur egun ere, bertikalean jarritako bloke du;
• sidebar edukia ez da edukiaren etiketa aldean bistaratuko da, eta honen gainean.

Hau zer sentikorrena Web Diseinua Media kontsultak egin daiteke adibide sinple bat da. Izan ere posibilitate askoz gehiago.

Beraz, zer da media kontsultak da?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. CSS Under Media kontsultak CSS3 ulertzen terminoa modulua, dituen orriaren edukia baldintza batzuk egokitzeko egin dezakezu. Adibidez, pantaila-tamaina edo orientazio gailua (erretratu / paisaia) erantzuten hasten da.

sisteman ulertzen denez beharra dauka edukia aldatzeko? media kontsultak erabiltzen ditu. zenbait parametro zehaztu dute. Gailu bat bertatik bisitari Gunean izan zen parametro horiek, aurrez errezetarik estiloak barne betetzen baditu. guztira CSS mahai gisa dute idatzi daiteke, edo aparteko fitxategi batean.

CSS Media kontsultak Browser Compatibility

Safari до Chrome. Nabigatzaile moderno guztiek onartzen teknologia hau, Safari batetik Chrome da. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Jakina, Internet Explorer bertsio zaharragoak erabiltzaileei arazo bat ... baina dezagun aurre zintzotasunez - nor dira oraindik zaharragoak IE erabiliz, ia ezer arazoak sor ditzake horiek.

Sintaxi moldatzaile diseinua Media kontsultak

html. Agian izan zara media kontsultak jasan denean konektatutako estilo fitxategia itsatsi da. Gogoratu lerro hori? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. 'testu / css' href = http: // gune /article/320575/%E2%80%99style.css%E2%80%99%3E Batzuetan amaieran parametro beste gehitzen, duten bezala begiratu: media = 'pantaila'.

Hau media kontsulta bat da! zehaztutako style fitxategi hori izango telebistak hornitutako gailuak lantzen dela adierazten du. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. Horren ordez, pantaila inprimatu zehaztu dezakezu - Kasu honetan, fitxategia estiloak aplikatzen dira, orriaren inprimatutako bada.

Hurrengo ezaugarriak erabili ahal izango duzu:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; guztiak - Bertsio unibertsala, isiltasuna erabiltzen, hau da kasu guztietan aplikatzen
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - pantailak (ordenagailuak, ordenagailu eramangarriak, pilulak, smartphones, eta hori pantaila bat hornituak guztiak);
• принтеры; inprimatu - Inprimagailuak;
• – проекторы; proiekzio - proiektorea;
• – речевые браузеры; hizkera - hizkera nabigatzaile;
• – для устройств для слабовидящих; braille - ikusmen arazoak gailuak;
• – для экранов телевизоров. Telebista - TV pantailak egiteko.

Hori ez da guztia. , но они используются редко. Badira hainbat CSS osagarriak Media kontsultak egozten, baina oso gutxitan erabiltzen dira. all. Horrez gain, ez duzu parametro bat zehaztu - guztietatik lehenetsia.

media kontsultak egitura

css. Horren ordez estilo-fitxategi bat sortzea, css kodea erabil dezakezu. Itxura hau bezalakoa da:

(тут будут стили } @media pantaila eta (max-width: 1024px) {( badira estilo}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. eta parametro gehigarriak - @media zuzentarauaren, eta horrek media kontsulta argi erabiltzen da ondoren, han gailua (pantailaren pantaila) motaren adierazten da. Max Width. Adibide honetan, erabili CSS Media kontsultak Max Zabalera jabetza. px. Horrek esan giltza agertzen diren estilo hori hartzen dira, gailu pantailaren tamaina 1024 px baino erabiltzaileak badu. и and не обязательны. Pantaila eta eta ez loteslea. hau idatzi daiteke:

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

Kasu horretan, ezaugarriak edozein gailu erabili behar, eta ez bakarrik hori telebistak hornituak horiek.

anitz parametroak zehaztuz

Demagun hainbat gailu erabiliko den estiloa aukeratzeko sorta mugatu nahi duzun. px, но не больше 500 px. Demagun zure gunea bisitatzen duten telefono batetik soilik propietate erakutsi nahi duzun, pantailaren tamaina ez da 320 baino gutxiago px, baina ez 500 baino gehiago px. Kasu horretan, eskaera itxura hartzen du:

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

and. zauden programazio ezagutzen baduzu, badakizu NJ duzu operadoreak zer aplikatzen da eta. Ezagutzen ez dutenentzat: bi baldintza dira egia bada egiaztatzen. E. aktibazioa kontsultaren pantailan propietate ez 320 baino gutxiago eta ez 500 baino gehiago pixel izan behar du.

and не ограничивается одним. Eta operadore kopurua ez da mugatua. jarri ahal izango duzu, askoz nahi duzun bezala. Adibidez, saiatu nolabaiteko tamaina smartphones eta oso desberdinak pantailak sortzea da - telebistetan.

Garrantzitsua puntu bat - Erabiltzaile gailua orientazioa. Norbaitek webguneak arakatzen zure smartphone orientazio bertikalean, norbaitek on - paisaia batera. orientation:portrait, для вторых, соответственно, orientation:landscape. Lehenengoen kasuan, baldintza orientazio osagarri bat behar izango duzu: erretratu, bigarren, hurrenez hurren, orientazioa eta: paisaia. @media. Lerro hauek, gainera, taldeak @media honako parentesi erakusten dira. and. horiek partekatu ahal izango duzu bidez eta.

Beste ñabardura interesgarriak. and вы вполне можете использовать оператор or. Horren ordez, eta ondo erabili daiteke edo operadorea. baldintza bat gutxienez behar zuen eskaeran egia izan! Adibidez:

) {} @media (max-width: 500px) edo (orientazioa: erretratu) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. pantailaren 500 baino gutxiago px edo erabilera orientazio bada, giltza indarrean estiloak hartuko du.

Hitz gakoa ez fintzeko for

not. media kontsulta, hitza ez txerta dezakezu. Hau honela egiten da:

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

Propietateak aktibatzen dira gehienezko zabalera ez da 700 pixel berdina bada.

media ezaugarriak

kontsultak aurrez ezarritako hainbat funtzio erabil daiteke. W3C. Ohitu zaitez ahal duzun guztia online W3C batera. coders gehienek nahikoa hiru nagusia jabea izatea:

• (о нем мы уже говорили); orientazio (dagoeneko horri buruz hitz egin dugu);
• (ширина, ее тоже упоминали); zabalera (zabalera, ere aipatzen da);
• (высота). altuera (altuera).

Altuera oso gutxitan erabiltzen da, baina oso gutxi dira, kasu horretan ere ezarpen hau baliagarria izan daiteke.

Nola eta non eskaerak jartzeko?

Web diseinatzaile askok nolabait jarri horien fitxategia estiloen amaieran. Adibidez, lehenengo estilo nagusiak zerrendatzen ditu, eta, ondoren, dokumentu behealdean ere, jarritako eskaerak.

Hau ez da oso ona. Askoz erosoagoa gailu ezberdinetan propietate jartzeko eskubidea estilo nagusiak ondoren. Adibidez, div bat, letra-gorri kolorea ezarri behar duzu:

div {

color: red;

}

Ondoren eskaera adierazten

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

propietate agintzen.

Ikuspegi hori astuna izango litzateke "erabiliz gero hutsa» css. preprocessor laguntza. zehatzagoak aplikazio eskaerak egiteko aukera interesgarri asko izan ziren.

Beste aukera - propietate jarriz style fitxategiak desberdinetan gailuak ezberdinetarako. Hori bereziki erabilgarria erabiltzen duzun preprocessor direktiba bada inportatzeko. Emaitza erraza editatu, kodea garbia da.

Zein One erabili? Guztiak araberakoa lehentasunak pertsonala eta taldearen ezaugarri on. Agian, laneko lekuan media kontsultak jarriz onartuko dira modu jakin bat du.

Gainera, ez ahaztu, zure bizitza errazteko ditzakezu azken software batekin. Ez da bakarrik preprocessor buruz. Gulp Group CSS Media kontsultak With prozesua askoz errazagoa egin daitezke. tresna honen edo bere analogs edozein menderatzea gomendatua.