PočítačeProgramovanie

CSS Media Dotazy: krok za krokom popis, rysy a recenzie

Kedysi dávno, tých, ktorí navštívia webové stránky pre chytré telefóny a podobné mobilné zariadenia, ktoré spôsobujú iní len smeje. Mnohí jednoducho nemohol pochopiť, prečo je to nutné, pretože tam je taký pohodlný stolné počítače! Alebo, v najhoršom prípade, notebooky. Okrem toho, že mobilný internet potom bolo drahé.

Čas plynul. Internet zlacneli. Predaj vyšiel ďalšie a ďalšie telefóny a tablety. O nejaký čas neskôr, majitelia populárnych miest zmätený drbal sa na hlave. Podľa štatistických údajov sa ukázalo, že ich zdroje sú častejšie navštevovať svoje smartfóny než s pevným PC!

V tej dobe lokality neboli optimalizované pre prezeranie na mobilných zariadeniach. Chystáte sa do starého života v telefóne, mali by ste sa uspokojiť s malými písmenami, malé položky menu a tlačidiel nepríjemné.

Príchod CSS Media otázok

Vyvstala potreba ukladať prostriedky tak, aby vyzerajú dobre pri pohľade z ktorejkoľvek obrazovky. Prvý šíriť prax, ktorým sa stanovujú samostatné stránky pre jednotlivé veľkosti. Napríklad návštevníci, ktorí používajú mobilný telefón, dostanete sa na jeden zdroj, a ten, ktorý je "sedí" s počítačom - na strane druhej. Ale bola to dlhá, drahé a nepraktické.

Potom prišiel CSS3 otázky médií. S nimi prišla len možnosť realizácie dynamického dizajnu.

Čo je dynamický dizajn?

Tento termín sa používa v prípade, že vzhľad prostriedku sa mení v závislosti od veľkosti obrazovky, na ktoré prechádzate. Ako tomu rozumieť? Je to jednoduché.

Predstavte si, že máte webové stránky. V jeho hornej časti je navigačné menu. Vo vodorovnej polohe. Rozkladá sa cez celú šírku stránky. Pod ním je blok s kontaktnými informáciami. Telefónne a adresa tiež umiestnené dva bloky a sú usporiadané vodorovne vedľa seba. V rámci tohto bloku - hlavný obsah a vľavo alebo vpravo je sidebar. Nižšie, ako je obvyklé, päty.

Tento "klasický" layout diagram. Je ideálny pre osobný počítač, ale nie príliš vhodné pre mobilné telefóny. Horizontálne menu je príliš široká. Kontakty sú umiestnené ďaleko od seba. Ak chcete použiť informácie z bočného panela a všetci budú musieť posunúť obrazovku, a to nie je každému po chuti.

Tento problém sa dá vyriešiť pomocou adaptívne a mobilné dizajn s CSS3 otázky médií. Pomocou médií otázok sme rekonštruovať umiestnenie obsahu ... Teraz to funguje takhle:

  • top - jednotka s vertikálnym menu navigácie;
  • pod ním - bloku s kontakty, ktoré sú teraz vo zvislej polohe;
  • sidebar obsah nie je zobrazený na strane obsah tagu a nad ňou.

Ide o jednoduchý príklad toho, čo možno urobiť s Citlivé Web Design otázky médií. V skutočnosti oveľa viac možností.

Takže to, čo je na otázky médií?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Pod CSS Media Otázky CSS3 pochopiť pojem modul, pomocou ktorého môžete vykonávať obsah stránky prispôsobiť určitým podmienkam. Napríklad začne reagovať na veľkosť obrazovky, alebo orientácie zariadenia (na výšku / na šírku).

Pretože systém chápe, že je potrebné zmeniť obsah? Používa mediálnu otázky. Uvádzajú určité parametre. Ak zariadenie, z ktorej návštevník prišiel na miesto spĺňa tieto parametre, vrátane pre-predpis štýlov. Môžu byť zapísaný ako totálny CSS tabuľky, alebo v samostatnom súbore.

Kompatibilita CSS Media Otázky Browser

Safari до Chrome. Všetky moderné prehliadače podporujú túto technológiu, zo Safari na Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Samozrejme, že používatelia starších verzií programu Internet Explorer mať problém ... ale priznajme si to úprimne - tí, ktorí stále používajú staršie IE, čokoľvek môže spôsobiť problémy.

Syntax adaptívne layout Media Otázky

html. Možno, že ste boli vystavení na otázky médií po pripojení súboru štýlu HTML. Nezabudnite, že linku? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. = 'text / css' href = http: // site /article/320575/%E2%80%99style.css%E2%80%99%3E Niekedy sa na konci pridáva ďalší parameter ktorý vyzeral ako: media =, obrazovky '.

To je mediálne dotaz! Ten znamená, že daný súbor štýl bude pracovať na zariadení vybavených televízoroch. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. Namiesto toho môžete zadať obrazovky tlače - v tomto prípade, štýly súbore sú použité v prípade, že stránka sa vytlačí.

Môžete použiť nasledovné atribúty:

  • – универсальный вариант, используется по молчанию, применяется во всех случаях; all - univerzálna verzia, použitý tichu, sa aplikuje vo všetkých prípadoch;
  • – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - obrazovky (počítače, notebooky, tablety, smartfóny, a všetko, čo je vybavená displejom);
  • принтеры; tlač - tlačiarne;
  • – проекторы; projekcie - projektor;
  • – речевые браузеры; reč - reč prehliadača;
  • – для устройств для слабовидящих; slepecké písmo - zariadenie pre zrakovo postihnutých;
  • – для экранов телевизоров. tv - na televíznych obrazovkách.

A to nie je všetko. , но они используются редко. Existujú atribúty niekoľko ďalších CSS Media Otázky, ale sú len zriedka. all. Naviac nezadáte parameter - Predvolené na všetky.

Štruktúra dotazov médií

css. Namiesto vytvárania súborov štýlu, môžete použiť css kód. Vyzerá to takto:

(тут будут стили } @media obrazovky a (max-šírka: 1024px) {( existujú štýly}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. Po @media smernice, ktorá jasne ukazuje, že médiá dotazu sa používa, je údaj o type zariadenia (obrazovky - obrazovky) a ďalšie parametre. Max Width. V tomto príklade, použite vlastnosť CSS Media Otázky Max Width. px. To znamená, že sa bude podieľať štýly uvedené v rovnátka, v prípade, že používateľ veľkosti obrazovky zariadenia než 1024 px. и and не обязательны. Obrazovka a nie záväzná. Môžete napísať toto:

@media (max-šírka: 1024px) {}

V takom prípade sú vlastnosti, ktoré majú byť použité na akomkoľvek zariadení, a to nielen tých, ktoré sú vybavené televíziou.

Zadanie viac parametrov

Predpokladajme, že chcete obmedziť rozsah niekoľkých prístrojov, ktoré budú použité pre zvolenie formátu. px, но не больше 500 px. Povedzme, že chcete zobraziť vlastnosti iba tí, ktorí navštívia vaše stránky z chytrého telefónu, veľkosť obrazovky nie je menšia ako 320 px, ale nie viac ako 500 px. V takom prípade sa žiadosť podobu:

@media (min šírka: 320) a (maximálnej šírky: 500px) {}

and. Ak ste oboznámení s programovaním, NJ viete, čo operátor je aplikovaný a. Pre tých, ktorí nevedia: skontroluje, ak sú splnené obe podmienky. Vlastnosti E. Aktivácia na obrazovke dopytu nesmie byť menšia ako 320 a nie viac ako 500 pixelov.

and не ограничивается одним. A počet operátorov nie je obmedzený na jedno. Môžete dať je toľko, koľko chcete. Napríklad pokuse vytvoriť určitej veľkosti obrazovky pre chytré telefóny a úplne odlišná - pre televízory.

Dôležitým bodom - orientácia na používateľa zariadenia. Niekto prezeranie webových stránok na váš smartphone v orientácii na výšku, niekto - s krajinou. orientation:portrait, для вторых, соответственно, orientation:landscape. V prvom prípade budete potrebovať dodatočnú orientáciu stav: portrét, na druhom, respektíve orientácia: krajina. @media. Tieto linky sú tiež uvedené v zátvorkách nasledujúcich @media tímu. and. Môžete ich zdieľať prostredníctvom a.

Ďalšie zaujímavé nuansy. and вы вполне можете использовать оператор or. Namiesto toho, a môžete tiež použiť alebo operátor. On potrebuje aspoň jednu podmienku v žiadosti, aby to bola pravda! napríklad:

) {} @media (max-šírka: 500px) alebo (orientácia: portrét) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. V prípade, že displej je menšia ako 500 px alebo použitie orientácia na výšku, bude traky trvať štýlov efektov.

Kľúčové slovo nie je na dolaďovanie

not. Médiá dotaz, môžete vložiť slovo nie. To sa vykonáva nasledujúcim spôsobom:

@media (ne max-šírka: 700 pixelov ) {}

Vlastnosti sú aktivované, ak je maximálna šírka nie je rovný 700 pixelov.

funkcia médií

Otázky možno použiť niekoľko vopred stanovených funkcií. W3C. Zoznámte sa s všetko, čo môže on-line W3C. Väčšina kódery dosť vlastniť tri hlavné:

  • (о нем мы уже говорили); Orientácia (už sme o tom hovorili);
  • (ширина, ее тоже упоминали); Šírka (šírka, je tiež uvedené);
  • (высота). výšky (výška).

Výška je zriedka použitý, ale existuje niekoľko prípadov, v ktorých by mohlo toto nastavenie byť užitočné.

Ako a kam umiestniť žiadostí?

Mnoho webové dizajnérmi nejako dať ich do konca štýlov súborov. Napríklad najskôr uvádza hlavné štýly, a potom v dolnej časti dokumentu, ktoré žiadosti.

To nie je moc dobré. Oveľa vhodnejšie umiestniť vlastnosti pre rôzne zariadenia hneď po hlavnej štýly. Napríklad máte div, ktorý stanovil červenú farbu písma:

div {

farba: červená;

}

Bezprostredne po tom, ako bola žiadosť naznačuje:

@media (min šírka: 320) {}

Predpisuje vlastnosti.

Takýto prístup by bol ťažkopádny, ak používate "čistého» CSS. Na pomoc preprocesoru. Majú veľa zaujímavých príležitostí pre spresnenie aplikačných požiadaviek.

Ďalšou možnosťou - umiestnenie vlastnosti pre rôzne zariadenia v rôznych súboroch štýle. To je obzvlášť užitočné, ak používate direktívy preprocesoru dovážať. Výsledkom je ľahko upraviť, čistý kód.

Ktorý z nich použiť? To všetko záleží na osobných preferenciách a charakteristikách tímu. Možno, že v mieste svojej práce má určitý spôsob uvádzania multimediálnych otázok budú prijaté.

Tiež nezabudnite, že môžete zjednodušiť svoj život s najnovším softvérom. Nejde len o preprocesoru. S dúškom skupiny CSS otázky médií môže tento proces oveľa jednoduchšie. Odporúča sa zvládnutie tohto nástroja alebo niektorý z jeho analógov.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 sk.birmiss.com. Theme powered by WordPress.