CSS-Mediaj Demandoj: paŝo post paŝo, karakterizaĵoj kaj recenzoj

En unu momento, tiuj, kiuj vizitis retejojn de inteligentaj telefonoj kaj similaj porteblaj aparatoj, kaŭzis nur ridadon de aliaj. Multaj simple ne povis kompreni, kial tio estas necesa, ĉar ekzistas tiaj oportunaj stacidomoj! Aŭ, ĉe la plej malbona, tekkomputiloj. Krome, interreto móvil estis multekosta tiutempe.

Tempo pasis. Interreto malkreskis. En la vendo de pli kaj pli da telefonoj kaj tablojdoj. Post iom da tempo, la posedantoj de popularaj lokoj konfuziĝis per kapo. Laŭ statistiko, ĝi rezultis, ke iliaj rimedoj pli ofte vizitas de inteligentaj telefonoj ol el staraj komputiloj!

En tiuj tagoj, retejoj ne estis optimumigitaj por vidi de porteblaj aparatoj. Irante al la malnova rimedo de la telefono, vi devus esti kontenta kun malgrandaj literoj, malgrandaj menueroj kaj malkomfortaj butonoj.

La apero de CSS-Mediaj Demandoj

Estis necese fari rimedojn por ke ili aspektu bone kiam rigarditaj de ajna ekrano. Unue, la praktiko krei apartajn ejojn por ĉiu grandeco disvastiĝis. Ekzemple, vizitanto, kiu uzis poŝtelefonon, akiris unu rimedon, kaj kiu "sidis" de la komputilo - sur la alia. Sed ĝi estis longa, multekosta kaj malkomforta.

Tiam estis CSS3 Media Demandoj. Kun ilia helpo, simpla ŝanco por efektivigi dinamikan dezajnon.

Kio estas dinamika dezajno?

Ĉi tiu termino estas uzata se la apero de la rimedo ŝanĝas laŭ la grandeco de la ekrano, sur kiu ĝi estas vidita. Kiel oni povas kompreni ĉi tion? Ĝi estas simpla.

Imagu, ke vi havas retejon. Ĉe la supro estas navigado menuo. Horizontala. Ĝi etendas la tutan larĝon de la paĝo. Sub ĝi estas bloko kun kontakta informo. La telefono kaj la adreso ankaŭ disvastiĝas super du blokoj kaj situas horizontale, apud unu la alian. Sub ĉi tiu bloko estas la ĉefa enhavo, kaj la flanka kolumno situas maldekstre aŭ dekstre. Sube, kiel kutime, piedlinio.

Ĉi tio estas "klasika" aranĝo de komponantoj. Ĝi estas bonega por persona komputilo, sed ne tro konvena por poŝtelefonoj. La horizontala menuo estas tro larĝa. La kontaktoj estas malproksimaj de unu la alian. Por uzi la informon de la flanka kolumno kaj devas movi la ekranon, kaj ĉi tio ne estas ĉiuj ŝatantoj.

La problemo povas esti solvita per adapta kaj movebla dezajno kun CSS3 Media Demandoj. Kun la helpo de amaskomunikiloj, ni reordigas la lokon de enhavo ... Nun ĉio funkcias tiel:

• Ĉe la supro - bloko kun vertikala navigado-menuo;
• Sub ĝi estas bloko kun kontaktoj, kiuj nun estas ankaŭ metitaj vertikale;
• La enhavo de la flanka kolumno montras ne ĉe la flanko de la enhavo de la <ĉefa> etikedo, sed sur ĝi.

Ĉi tiu estas la plej simpla ekzemplo de kio povas esti farita per la Respondema Retejo-Dezajno-Duona Demandoj. Fakte, la eblecoj estas multe pli grandaj.

Do kio estas MediaQuestion?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Sub CSS Media Informmendoj CSS3 komprenas la terminon modulo, kun kiu vi povas fari la enhavo de la paĝo, por adapti al certaj kondiĉoj. Ekzemple, ĝi komencas respondi al la grandeco de ekrano, aŭ al la orientiĝo de la aparato (portreto / pejzaĝo).

Kiel la sistemo komprenas, ke vi bezonas ŝanĝi la enhavon? Por ĉi tio, amaskomunikiloj estas uzataj. Ili specifas iujn parametrojn. Se la aparato el kiu la vizitanto venis al la retejo respondas al ĉi tiuj parametroj, antaŭ-registritaj stiloj estas inkluzivitaj. Ili povas esti skribitaj ambaŭ en la ĝenerala CSS-tablo, kaj en aparta dosiero.

CSS-Duona Demandoj kongruo kun retumiloj

Safari до Chrome. Ĉiuj modernaj foliumiloj subtenas tiun teknologion, de Safari por Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Kompreneble, la uzantoj de malnovaj versioj de Internet Explorer havas problemon ... sed ni alfronti ĝin honeste - tiuj kiuj ankoraŭ uzas pli malnovaj la IE, preskaŭ nenion povas kaŭzi problemojn.

Duona Demandoj Adaptiva Aranĝo-Sintakso

html. Eble vi spertis amaskomunikiloj demandoj kiam konektis la stilon dosieron al html. Ĉu vi memoras ĉi tiun linion? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. Kelkfoje pli parametro estis aldonita al la fino, kiu aspektis: amaskomunikiloj = 'ekrano'.

Ĉi tio estas la amaskomunikilaro postulo! Ĝi signifas, ke la specifita stila dosiero funkcios sur ekrano-ekipitaj aparatoj. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. Male, vi povas specifi ekrano presita - en ĉi tiu kazo, la stiloj de la dosiero estas aplikitaj, se la paĝo estas presita.

Vi povas uzi la jenajn atributojn:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; ĉiuj - universala versio, uzata de silento, ĝi aplikas en ĉiuj kazoj;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - ekranoj (komputiloj, tekkomputiloj, tabeloj, inteligentaj telefonoj, kaj ĉion, kio estas ekipita kun ekrano);
• принтеры; presita - Printers;
• – проекторы; projekcio - projekciilo;
• – речевые браузеры; parolado - parolado retumiloj;
• – для устройств для слабовидящих; brajlo - aparatoj por vide difektita;
• – для экранов телевизоров. Tv - por televidaj ekranoj.

Ĉi tio ne estas ĉio. , но они используются редко. Estas pluraj aldonaj CSS Media Informmendoj atributoj, sed ili malofte uzata. all. Krome, vi ne specifi parametron - Defaŭlta sur ĉiuj.

Strukturo de Amaskomunikilara Peto

css. Anstataŭ krei stilo dosiero, vi povas uzi css kodo. Ĝi aspektas tiel:

(тут будут стили } @media ekrano kaj (max-width: 1024px) {( ekzistas stiloj}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. Post @media direktivo kiu lasas certe ke la amaskomunikiloj query estas uzata, estas indiko de la tipo de aparato (ekrano - la ekrano) kaj aldonaj parametroj. Max Width. En ĉi tiu ekzemplo, uzu CSS Media Informmendoj Max Larĝeco proprieto. px. Tio signifas ke la stiloj listigita en la streĉaj estos implikita, se la uzanto de la aparato ekrano grandeco ol 1024 px. и and не обязательны. Ekrano kaj ne deviga. Vi povas skribi tiel:

@media (max-larĝa: 1024px) {}

En ĉi tiu kazo, la propraĵoj estos uzataj en iuj aparatoj, ne nur tiuj, kiuj estas ekipitaj per ekrano.

Specifante plurajn parametrojn

Supozu, ke vi volas limigi la gamon de aparatoj, sur kiuj aplikos la elektitaj stiloj. px, но не больше 500 px. Imagu ke vi volas montri la propraĵoj de nur tiuj, kiuj vizitas vian retejon de smartphone, la ekrano grandeco estas ne malpli ol 320 px, sed ne pli ol 500 px. En ĉi tiu kazo, la peto prenas la jenan formon:

@media (min-larĝa: 320px) kaj (max-larĝa: 500px) {}

and. Se vi estas familiara kun programado, vi NJ scias kion operatoro aplikas kaj. Por tiuj, kiuj ne scias: li kontrolas ĉu ambaŭ kondiĉoj estas veraj. Tio estas, por aktivigi proprietojn en la konsulto, la ekrano devas esti almenaŭ 320 kaj ne pli ol 500 pikseloj.

and не ограничивается одним. Kaj kelkaj operatoroj estas ne limigita al tiu. Vi povas meti ilin precize kiom vi volas. Ekzemple provu krei iujn grandecojn por inteligentaj ekranoj kaj tute malsamaj por televidiloj.

Grava punkto estas la orientiĝo de la aparato de la uzanto. Iu foliumas ejojn kun inteligenta telefono kun portreta orientiĝo, iu - kun pejzaĝo. orientation:portrait, для вторых, соответственно, orientation:landscape. Por la iama, vi bezonos kroman kondiĉon orientiĝo: portreto, por la dua, respektive, orientiĝo: pejzaĝo. @media. Ĉi tiuj linioj ankaŭ estas montritaj en krampoj post @media teamo. and. Vi povas dividi ilin tra kaj.

Alia interesa afero. and вы вполне можете использовать оператор or. Anstataŭe, vi povas bone uzi la aŭ operatoro. Li volas unu kondiĉon en la peto esti vera! Ekzemple:

) {} @media (max-width: 500px) aŭ (orientiĝo: portreto) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. Se la ekrano estas malpli ol 500 px aŭ uzo portreto orientiĝo, la streĉaj prenos efikon stiloj.

La ŝlosilvorto ne por pli bona fiksado

not. La amaskomunikiloj query, vi povas enmeti la vorton ne. Ĉi tio fariĝas tiel:

@media (ne max-larĝa: 700px) {}

Propraĵoj estas aktivigitaj se la maksimuma larĝo ne estas 700 pikseloj.

Duona funkcioj

En demandoj, pluraj antaŭdifinitaj funkcioj povas esti uzataj. W3C. Konatiĝi kun ĉiuj vi povas rete W3C. Sufiĉas por plej multaj kompostoj mastri la tri ĉefojn:

• (о нем мы уже говорили); orientiĝo (ni jam parolis pri tio);
• (ширина, ее тоже упоминали); Larĝeco (larĝa, ĝi ankaŭ menciis);
• (высота). Alteco.

La alteco malofte uzas, sed ekzistas kelkaj kazoj, en kiuj ĉi tiu agordo povas esti oportuna.

Kiel kaj kie meti petojn?

Multaj aranĝaj artistoj kelkfoje kaŭzas ilin ĉe la fino de la stilfolio. Ekzemple, unue la ĉefaj stiloj estas listigitaj, kaj tiam, ĉe la fundo de la dokumento, estas demandoj.

Ĉi tio ne estas tre bona. Estas multe pli konvena loki propraĵojn por malsamaj aparatoj ĝuste post la ĉefaj stiloj. Ekzemple, vi havas div, kiu havas ruĝan tipan koloron:

Div {

Koloro: ruĝa;

}

Tuj post ĝi specifas la konsulton:

@media (min-larĝa: 320px) {}

Preskribu propraĵojn.

Ĉi tiu aliro estos ĝena, se vi uzas "pura" css. Antaŭprocesantoj venos al la rekupero. Ili havas multajn interesajn eblecojn por pli preciza apliko de demandoj.

Alia eblo estas meti proprietojn por malsamaj aparatoj en malsamaj stilaj dosieroj. Ĉi tio estas speciale utila se vi uzas la importan direkton de preprocesiloj. La rezulto estas pura, pura kodo.

Kiun opcion uzi? Ĉio dependas de la personaj preferoj kaj karakterizaĵoj de la teamo. Eble, en la loko de via laboro, oni adoptas certan metodon por meti plurmediajn demandojn.

Ankaŭ ne forgesu, ke vi povas simpligi vian vivon per la helpo de la plej lasta programaro. Ne temas pri preprocesiloj. Kun la helpo de Gulp Group CSS Media Demandoj eblas fari multe pli konvena la procezon. Ni rekomendas mastrumi ĉi tiun ilon aŭ iujn siajn analogojn.