CSS Media Queries: gav bi gav description, taybetmendiyên û reviews

Rojekê ji rojan, ew kesên ku serdana malperên ji bo Smartphones û cîhazên similar mobile ku sedema din jî tenê kenê. Gelek bi hêsanî nikaribû fêm bike ka çima vê pêwîst e, ji ber ku wiha ye komputerê rehet heye! An jî, di rewşa herî xerab laptopan. Li gel vê, di internêtê de mobile paşê biha bû.

Time re derbas bûn. Internet erzantir bû. The sale derket telefonên û hebên bêtir û bêtir. Piştî ku çend roj, ku xwediyên malperên gel şaş xedartir serê wî. Li gor îstatîstîkên, wisa xuya bû ku çavkaniyên xwe ne bêtir ji serdana smartphones xwe ji bi PC stationary!

Di vê demê de malperên hatine danîn, ji bo viewing li ser cîhazên mobîl çewtiyên ne. Tevlîbûna li jiyana kevin ser telefona xwe, tu dê ji bo naveroka bi tîpên biçûk, tomar menu biçûk û bişkokên rehetin.

The advent ji CSS Media Queries

kir ku divê ji bo sepandina çavkaniyên da ku ew binêrin baş gava ku ji ti screen bînrawe hene. First pratîka avakirina malperên cuda de ji bo her size belav bû. Ji bo nimûne, mêvanên ku telefona mobîl bikar tînin, hûn li ser yek çavkaniyê binirxîne, û yek e, ku "rûniştî" bi komputera te get - li ser ya din. Lê belê ev yek dirêj, biha û dijwar bû.

Hingê CSS3 Media Queries hat. Bi wan re îhtîmala mere ji pêkanîna design dînamîk hat.

design dînamîk çi ye?

Ev term tê bikaranîn, eger ew ji aliyê çavkaniyên li gor size of the screen ku li ser forûmê diguhere. How to vê fêm bike? Ev sade.

Bifikirin ku hûn xwedî malperekê. Di beşa jor xwe ye menu navîgasyon heye. Horizontal. Ev li tevahiya width ya rûpel welata. Li jêr ku bloka bi agahiyên têkiliyê de ye. Telefonê û navnîşana jî ji aliyê her du blokan mihan û bi horîzontal sazkirin de parvekiriye ji hev û din. Di bin vê blokê de - ji naveroka sereke, û li milê çepê, an jî mafê darikê e. Li jêr, wek her carê, footer.

Ev diagrama layout "klasîk". Ev temam ji bo komputereke şexsî, di heman demê de jî wê rehetî ji bo telefonên destan e. menu Horizontal jî fireh e. Têkilî bi dûr û ji hev dikeve. Ji bo bikaranîna agahî ji darikê û hemû dê kêlekê bi ser ekranê, û ev ji bo tam ji her kesî ne.

Pirsgirêka dikare bi bikaranîna an design Adaptive û mobile bi CSS3 Media Queries çareserkirin. Bi bikaranîna pirsên çapemeniyê, em avedankirina location ji naveroka ... Now it like this dixebite:

• top - yekîneya bi menu navîgasyon, vertical;
• bin jî - ji block bi têkiliyên, ku bi niha jî vertically danîn;
• Naveroka darikê ye, ku li aliyê naveroka tag pêşan ne, û li jor.

Ev mînakeke sade ji çi dikare were kirin bi Design: bersiva Web Media Queries kirin e. Di rastiyê de derfetên gelek bêtir.

Îcar çi ji pirsên çapemeniyê ye?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Di bin CSS Media Queries CSS3 fêm module demdirêj, bi yên ku tu dikarî bikî naveroka rûpel guncîna hin mercan de. Ji bo nimûne, ew dest pê dike bersivê bide screen size, an device ahengdarî (portreya / landscape).

Ji ber ku sîstema fêm dike ku pêwîst ji bo guhertina naveroka? Ev kar tîne pirsên çapemeniyê. Ew Parametreyên hin diyar bike. Ger amûrekê ji ku mêhvanên ji malperê hat pêşwazî van Parametreyên, di nav de styles pre-online. Ew dikare wek sifrê CSS total an de hatiye nivîsîn, di nava pelên.

CSS Media Queries Compatibility Browser

Safari до Chrome. Hemû gerokên modern piştgiriya vê teknolojiyê, ji Safari bo Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Bê guman, bikarhênerên versions kevintir ji Internet Explorer xwedî problem ... lê em jî bi awayek rû bi rû - yên ku hê jî bi bikaranîna bi temen li IE, bi tenê li ser tiştekî dibe sedema pirsgirêkan.

Hevoksaziyê layout Adaptive Media Queries

html. Dibe ku hûn ji bo pirsên medya ketibûyî gava ku file style bo html ve girêdayî ye. Bînin bîra xwe ku line? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. < 'Stylesheet' rel link = type = 'text / css' href = http: // site /article/320575/%E2%80%99style.css%E2%80%99%3E Carna di dawiya dixe parametre din, 'screen' = medya: ku wek nêrî.

Ev a medyayê bê meşandin e! Ew diyar dike ku file style xwe dişinî li ser cîhazên stendine bi Televizyonan di kar bikin. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. Li şûna wê, tu screen print diyar - di vê rewşê de, di styles of the file bi cîhkirin, eger rûpel tê çapkirin.

Tu dikarî ji taybetiyên jêrîn bi kar tînin:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; hemû - Versiyon ji gerdûnî, ku ji aliyê bêdeng e, di hemû rewşan de tê sepandin;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - (Aksîyonên bi komputeran, laptopan, tablet, smartphone, û hemû tiştên ku bi display stendine);
• принтеры; print - Printers;
• – проекторы; projection - projector;
• – речевые браузеры; gerokên axaftina - axaftina;
• – для устройств для слабовидящих; braille - cîhazên ji bo kêmasîya dîtinê;
• – для экранов телевизоров. tv - ji bo ekranên televîzyon.

Ew hemû ne. , но они используются редко. in çend CSS din Media Queries peyam hene, lê ew bi kêm tê bikaranîn. all. Li gel, ku tu pê parametre diyar ne - Default li ser hemû.

Bingehê pirsên çapemeniyê

css. Li şûna ku pelê style, tu dikarî kodê css bi kar tînin. Ev like this dinêre:

(тут будут стили } screen @media û (max-width: 1024px) {( styles li wir in}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. Piştî ku bi telîmata @media, ku jî eşkere dike ku di medyayê tê bikaranîn, e yek jî nîşaneya ji xwe re cureyê cîhaza (screen - the screen) heye û Parametreyên din. Max Width. Di vê mînakê de, bikaranîna malê CSS Media Queries Max Firehiya. px. Ev tê wateya ku styles di lîsteyê de li ser BBCode ku tev wê bên, eger user ji screen size device ji 1024 px. и and не обязательны. Screen û û binding ne. Tu dikarî vê binivîse:

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

Di vê rewşê de, taybetiyên ku were li ser her amûrê bi kar anîn, ne tenê yên ku bi gelek kenalan û stendine.

Di kîjan Parametreyên multiple

Kî ku tu dixwazî sînorekî ji bi ji çend cîhazên ku wê were bikaranîn ji bo hilbijartina style. px, но не больше 500 px. Werin, em dibêjin, hûn dixwazin nîşan taybetiyên bi tenê ew kesên ku numreya te ji smartphone serdanê de, screen size e kêmtir ji 320 px, lê tu zêdetir ji 500 px ne. Di vê rewşê de, daxwaza digire forma:

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

and. Eger tu bi bernameyên nas in jî, hûn dizanin NJ çi operator tê sepandin û. Ji bo kesên ku nizanin ne: ev kontrol dike, eger herdu mercên rast in. milkên E. Activation li screen query, divê ne kêmtir ji 320 û ne bêtir ji 500 pixel be.

and не ограничивается одним. Û hejmara operatorên ku yek sînorkirî ne. Tu dikarî wan bi qasî ku hûn dixwazin xwe bikin. Ji bo nimûne, hewl bo afirandina jî mesajek li size hin ji bo smartphone û pir cuda - ji bo Televizyonan.

An xaleke girîng - ahengdarî de cîhaza user. Yekî ser forûmê malperên li ser smartphone xwe li ahengdarî portreya, kesek - bi landscape. orientation:portrait, для вторых, соответственно, orientation:landscape. Ji bo yê berê, tu dê ahengdarî şertê din jî divê: portreya, ji bo ya duyem, bi rêzê ve, meyla: landscape. @media. Van prensîban jî di nav parantezê de li jêr @media tîma li banî tê. and. Tu dikarî wan bi rêya parve û.

Din zilmê balkêş. and вы вполне можете использовать оператор or. Li şûna wê, û hûn baş dikarin bi kar an operator. Ew qet nebe yek rewşa divê li ser daxwaza ji bo rast be! Ji bo nimûne:

) {} @media (max-width: 500px) an (orientation: portreya) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. Eger screen kêmtir ji 500 px an bikaranîna ahengdarî portreya e, destû wê styles bandor bibin.

Li Þîfreyę Bigere ji bo xas-tuning ne

not. The medyayê, tu dikarî peyva CDROM'ê ne. Ev jî wiha kiriye:

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

Properties bi aktîfkirin, eger herî zêde width e ku 700 pixels wekhev ne.

taybetmendiyên medya

The pirsên dikare gelek kar û pre-ava bikaranîn. W3C. Nasîya xwe bi we hemûyan dikare bike W3C. Herî kirox, bes ji bo xwe sê sereke:

• (о нем мы уже говорили); îstîqametê (em ji niha ve behsa wê);
• (ширина, ее тоже упоминали); width (width, ku her weha behsa);
• (высота). height (height).

Bilindahiya kêm tê bikaranîn, lê çend bûyerên ku di vê mîhengê nikare kêrhatî be heye.

Çawa û li kû ji bo cîbicîkirina daxwazên?

Gelek îcrakar web bi awayekî heta dawiyê ji wan ji styles file danîn. Ji bo nimûne, ya yekemîn di listê de şêweyên sereke, û pişt re, di binê belgeyê de, daxwazên danîn.

Ev e pir baş ne. Çiqas xweşkeys de zêdetir ji bo cîbicîkirina milkên ji bo amûrên cuda mafê piştî şêweyên sereke. Ji bo nimûne, tu div, yê ku di font color red:

div {

color: red;

}

Di cih de piştî daxwaza nîşan dide:

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

Nivîsandine milkên.

Ji ber ku helwesteke dê laşgiran eger tu bi bikaranîna "paqij» css. To alîkariya Unix. Ew xwedî gelek derfetên balkêş ji bo daxwazên serlêdana çêtir.

Din option - dînin milkên ji bo amûrên cuda li files style cuda. Ev yek bi taybetî kêrhatî eger tu bi kar directive Unix têxê. Di encamê de bi hêsanî ji bo weşînertiya, code paqij e.

Ku yek ji bi kar bîne? hemû Ev li gor tercîhên şexsî û taybetiyên tîma girêdayî ye. Dibe ku, li cihê karê te awayekî hinek ji yên Sûrye pirsên çapemeniya wê bên qebûlkirin.

Jî ji bîr neke ku tu jiyana xwe bi dawî software asankirin. Ev e tenê li ser Unix ne. Bi gulp Pol CSS Media Queries dikarin pêvajoya pir hêsantir bike. Baştir e ji axayê ev tool yan jî yek ji analogs xwe.