CSS Media Hoja: hatua kwa hatua maelezo, makala na maoni

Hapo zamani, wale ambao kutembelea tovuti kwa smartphones na sawa vifaa simu kwamba kusababisha wengine tu akicheka. Wengi tu hawakuweza kuelewa kwa nini hii ni muhimu, kwa sababu kuna kama vizuri kompyuta ya mezani! Au, saa mbaya, Laptops. Aidha, Internet mkononi kisha mara ghali.

Muda kupita. Internet kuwa nafuu. kuuza toka nje Simu za zaidi na zaidi na vidonge. Baada ya muda, wamiliki wa maeneo maarufu puzzled scratching kichwa chake. Kwa mujibu wa takwimu, inaonekana kwamba rasilimali zao wana uwezekano mkubwa wa kutembelea simu zao kuliko kwa PC stationary!

Wakati huo maeneo ya si optimized kwa kuangalia kwenye vifaa vya mkononi. Kwenda kwa maisha ya zamani juu ya simu yako, bila kuwa na kuridhika na barua ndogo, vitu vidogo menu na vifungo wasiwasi.

ujio wa CSS Media Hoja

Kulikuwa na haja ya kuweka rasilimali ili waweze kuangalia vizuri wakati kutazamwa kutoka screen yoyote. Kwanza kuenea mazoezi ya kuanzisha maeneo ya tofauti kwa kila ukubwa. Kwa mfano, wageni wanaotumia simu za mkononi, unaweza kupata juu ya rasilimali moja, na moja kwamba ni "kukaa" kwa kompyuta yako - kwa upande mwingine. Lakini kwa muda mrefu, ghali na hazifai.

Basi, CSS3 Media Hoja. Nao wakaja uwezekano tu ya utekelezaji ya mpango nguvu.

ni mpango wa nguvu gani?

Neno hili hutumika kama kuonekana kwa rasilimali mabadiliko kulingana na ukubwa wa screen ambayo ni kuvinjari. Jinsi ya kuelewa hili? Ni rahisi.

Fikiria kuwa una tovuti. Katika sehemu yake ya juu kuna navigation. Mlalo. Ni hadi juu ya upana mzima wa ukurasa. Hapa chini yaani kuzuia na mawasiliano ya habari. Simu na anwani pia spaced na vitalu mbili na hupangwa sambamba karibu na kila mmoja. Chini ya kifungu hiki - maudhui kuu, na upande wa kushoto au kulia ni sidebar. Hapa chini, kama kawaida, footer.

Hii "classical" mpangilio mchoro. Ni kamili kwa ajili ya kompyuta binafsi, lakini si rahisi sana kwa ajili ya simu za mkononi. orodha ya usawa ni mpana sana. Mawasiliano ziko mbali na kila mmoja. Kutumia taarifa kutoka sidebar na wote itabidi kitabu screen, na ni si kwa ladha ya kila mtu.

tatizo yanaweza kutatuliwa kwa kutumia adaptive na simu kubuni na CSS3 Media Hoja. Kwa kutumia maswali vyombo vya habari, sisi upya eneo la maudhui ... Sasa ni kazi kama hii:

• juu - kitengo na wima menyu;
• chini yake - block na mawasiliano, ambayo ni sasa pia kuwekwa vertikalt,
• maudhui sidebar si kuonyeshwa upande wa maudhui tag, na juu yake.

Huu ni mfano rahisi ya nini kinaweza kufanywa na shukrani Web Design Media Hoja. Kwa kweli uwezekano wengi zaidi.

Kwa hiyo kile ni maswali vyombo vya habari?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Chini ya CSS Media Hoja CSS3 kuelewa mrefu moduli, ambayo unaweza kufanya maudhui ya ukurasa wa kukabiliana na hali fulani. Kwa mfano, inaanza kujibu ukubwa screen, au mwelekeo wa kifaa (picha / mazingira).

Kama mfumo inaelewa kuwa haja ya mabadiliko ya maudhui? Inatumia maswali vyombo vya habari. Wao kubainisha kigezo fulani. Kama kifaa ambayo mgeni alikuja kwa tovuti hukutana vigezo hivi, ikiwa ni pamoja na mitindo kabla ya cheti cha daktari. Wanaweza kuandikwa kama jumla meza CSS, au katika faili tofauti.

CSS Media Hoja Browser utangamano

Safari до Chrome. browsers kisasa kusaidia teknolojia hii, na Safari Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Bila shaka, watumiaji wa matoleo ya zamani ya Internet Explorer na tatizo ... lakini hebu uso yake uaminifu - wale bado ni kutumia wakubwa IE, tu kuhusu kitu chochote unaweza kusababisha matatizo.

Syntax adaptive mpangilio Media Hoja

html. Pengine kuwa wazi kwa maswali vyombo vya habari wakati wa kushikamana style faili html. Kumbuka kuwa mstari? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. < 'XSLT' kiungo rel = Aina = 'maandishi / CSS' href = http: // tovuti /article/320575/%E2%80%99style.css%E2%80%99%3E Wakati mwingine mwisho anaongeza parameter mwingine, aliyeonekana kama: 'screen' vyombo vya habari =.

Hii ni vyombo vya habari swala! Yeye inaonyesha kwamba maalum style file kazi juu ya vifaa vifaa na TV. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. Badala yake, unaweza kutaja screen magazeti - katika kesi hii, mitindo ya faili ni kutumika, ikiwa ukurasa ni kuchapishwa.

Unaweza kutumia sifa zifuatazo:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; wote - wote version, kutumika kwa ukimya, inatumika katika kesi zote,
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - skrini (kompyuta, Laptops, vidonge, smartphones, na yote ni vifaa na display);
• принтеры; magazeti - Printers,
• – проекторы; makadirio - Projector,
• – речевые браузеры; browsers hotuba - hotuba;
• – для устройств для слабовидящих; braille - vifaa kwa ajili ya matatizo ya kuona,
• – для экранов телевизоров. tv - kwa ajili ya skrini TV.

Hiyo si wote. , но они используются редко. Kuna ziada CSS Media Hoja sifa, lakini ni mara chache kutumika. all. Aidha, sio kutaja parameter - Default juu ya yote.

muundo wa maswali vyombo vya habari

css. Badala ya kuunda style file, unaweza kutumia css kanuni. Inaonekana kama hii:

(тут будут стили } @media screen na (max upana: 1024px) {( kuna mitindo}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. Baada agizo @media, ambayo inaonyesha wazi kuwa vyombo vya habari swala inatumika, kuna ishara ya aina ya kifaa (screen - screen) na vigezo ziada. Max Width. Katika mfano huu, kutumia CSS Media Hoja Max upana mali. px. Hii ina maana kwamba mitindo waliotajwa katika braces watashiriki, kama mtumiaji wa kifaa screen ukubwa kuliko 1024 px. и and не обязательны. Screen na wala si nguvu ya kisheria. Unaweza kuandika hivi:

@media (max upana: pikseli 1024) {}

Katika hali kama hiyo, mali ya kutumika kwenye kifaa chochote, sio tu zile ambazo ni pamoja na vifaa TV.

Kubainisha vigezo mbalimbali

Tuseme unataka kuweka mipaka mbalimbali ya vifaa kadhaa ambazo zitatumika kuchagua style. px, но не больше 500 px. Tuseme unataka kuonyesha tabia za wale tu ambao kutembelea tovuti yako kutoka smartphone, ukubwa screen ni si chini ya 320 px, lakini si zaidi ya 500 px. Katika hali kama hiyo, ombi inachukua fomu:

@media (min-upana: 320px) na (max upana: 500px) {}

and. Kama una uzoefu na programu, wewe NJ kujua nini operator inatumika na. Kwa wale ambao hawajui: ni hundi kama hali zote mbili ni kweli. E. Activation mali katika screen swala lazima si chini ya 320 na si zaidi ya 500 saizi.

and не ограничивается одним. Na idadi ya watoa huduma si mdogo wa moja. Unaweza kuweka yao kama vile unataka. Kwa mfano, jaribu kujenga baadhi skrini ukubwa kwa smartphones na tofauti kabisa - kwa ajili ya TV.

hatua muhimu - mwelekeo wa kifaa mtumiaji. Mtu kuvinjari tovuti kwenye simu yako mahiri katika uelekeo wa picha, mtu - na mazingira. orientation:portrait, для вторых, соответственно, orientation:landscape. Kwa zamani, unahitaji ziada hali Mwelekeo: picha, kwa ajili ya pili, kwa mtiririko huo, mwelekeo: mandhari. @media. mistari hizi pia inavyoonekana katika mabano baada ya timu @media. and. Unaweza kushiriki nao kupitia na.

Nyingine ya kuvutia nuance. and вы вполне можете использовать оператор or. Badala yake, na unaweza pia kutumia au mwendeshaji. Yeye mahitaji ya hali angalau katika ombi kuwa ni kweli! Kwa mfano:

) {} @media (max upana: 500px) au (Mwelekeo: picha) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. Kama screen ni chini ya 500 px au matumizi uelekeo wa picha, braces itachukua mitindo athari.

Keyword si kwa ajili ya faini-tuning

not. vyombo vya habari swala, unaweza kuingiza neno la. Hii inafanyika kama ifuatavyo:

@media (si max upana: 700px ) {}

Mali ni ulioamilishwa kama upana upeo si sawa na 700 saizi.

makala ya vyombo vya habari

maswali inaweza kutumika kazi kadhaa kabla ya haifahamiki. W3C. Jizoeshe na wote unaweza online W3C. coders Wengi kutosha kumiliki kuu tatu:

• (о нем мы уже говорили); Mwelekeo (sisi tayari kuzungumza kuhusu hilo);
• (ширина, ее тоже упоминали); upana (upana, ni pia imetajwa);
• (высота). urefu (urefu).

Urefu ni mara chache kutumika, lakini kuna kesi chache ambazo mpangilio huu inaweza kuwa na manufaa.

Jinsi na mahali pa maombi?

Wengi mtandao wabunifu namna fulani kuziweka hadi mwisho wa mitindo file. Kwa mfano, kwanza orodha mitindo kuu, na kisha, kwa chini ya hati, kuwekwa maombi.

Hii si nzuri sana. Rahisi zaidi ya kuweka mali kwa ajili ya vifaa mbalimbali baada ya mitindo kuu. Kwa mfano, unaweza kuwa na div, ambayo kuweka nyekundu font color:

div {

rangi: nyekundu;

}

Mara baada ya ombi inaonyesha:

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

Inaeleza mali.

Mfumo huo kuwa mbaya kama unatumia "safi» css. Kwa msaada wa kabla ya processor. Wana fursa nyingi za uwekezaji kwa maombi sahihi zaidi ya maombi.

Chaguo jingine - kuweka mali kwa ajili ya vifaa mbalimbali katika files tofauti style. Hii ni muhimu hasa kama unatumia kabla ya processor agizo kuagiza. Matokeo yake ni rahisi kwa hariri, kanuni safi.

Ni moja ya Matumizi? Yote inategemea upendeleo binafsi na tabia ya timu. Pengine, katika nafasi ya kazi yako ina njia fulani ya kuweka maswali ya vyombo vya itakubaliwa.

Pia usisahau kuwa unaweza kurahisisha maisha yako na programu ya kisasa. Ni si tu kuhusu kabla ya processor. Pamoja na Gulp Group CSS Media Maswali yanaweza kufanya mchakato rahisi zaidi. Ilipendekeza kwa bwana chombo hiki au yoyote analogi zake.