Sentaks la pou tou de demann min-lajè ak max-lajè medya
Konsepsyon sit entènèt repons se yon apwòch nan bati paj kote paj sa yo ka dynamique chanje Layout yo ak aparans ki baze sou gwosè ekran vizitè a . Gwo ekran ka resevwa yon Layout ki adapte ak moun ki pi gwo montre pandan y ap pi piti aparèy, tankou telefòn mobil, ka resevwa menm sit entènèt la fòma nan yon fason ki apwopriye pou ki pi piti ekran. Apwòch sa a bay yon eksperyans itilizatè pi bon pou tout itilizatè yo epi li ka menm ede amelyore classement motè rechèch . Yon pati enpòtan nan konsepsyon entènèt reponn se CSS Media Queries.
Media Queries yo tankou ti deklarasyon kondisyonèl andedan CSS dosye sit entènèt ou an, ki pèmèt ou mete sèten règ CSS ki pral sèlman pran afekte yon fwa yon kondisyon sèten se met - tankou lè yon gwosè ekran anwo a oswa anba a sèten limit.
Media Queries nan Aksyon
Se konsa, kouman ou itilize Media Queries sou yon sit entènèt? Isit la se yon egzanp trè senp:
- Ou ta kòmanse ak yon dokiman HTML byen estriktire gratis nan nenpòt estil vizyèl (se sa ki CSS se pou)
- Nan dosye CSS ou, ou ta kòmanse jan ou nòmalman fè pa manier paj la ak mete yon debaz pou ki jan sit entènèt la ap gade. Di ou te vle gwosè font la nan paj la yo dwe 16 piksèl, ou ta ka ekri sa a CSS: kò {font-size: 16px; }}
- Koulye a, ou ka vle ogmante ki gwosè font pou pi gwo ekran ki gen ase byen imobilye yo fè sa. Sa a se kote Media Queries choute pous Ou ta kòmanse yon Media Query tankou sa a: @media ekran ak (min-lajè: 1000px) {}
- Sa a se sentaks la nan yon Query Media. Li kòmanse ak @media etabli Media Query nan tèt li. Next ou mete "medya kalite a", ki nan ka sa a se "ekran". Sa a aplike a ekran òdinatè Desktop, tablèt, telefòn, elatriye Finalman, ou fini Media Query la ak "karakteristik nan medya". Nan egzanp nou an pi wo a, se sa ki "mitan-lajè: 1000px". Sa vle di ke Media Query a ap choute nan pou montre ak yon lajè minimòm de 1000 piksèl lajè.
- Apre eleman sa yo nan Media Query a, ou ajoute yon ouvèti ak fèmti Curly Curly menm jan ak sa ou ta fè nan nenpòt ki règleman CSS nòmal.
- Etap final la nan yon Media Query se ajoute règ yo CSS ke ou vle pou aplike pou yon fwa ke kondisyon sa a te rankontre. Ou ajoute règleman sa yo CSS ant aparèy òtopedik yo Curly ki fè moute Media Query a, tankou sa a: @media ekran ak (min-lajè: 1000px) {kò {font-size: 20px; }}
- Lè kondisyon yo nan Media Query yo te rankontre (fenèt navigatè a se omwen 1000 piksèl lajè), sa a style CSS pral pran efè, chanje gwosè font sit nou an soti nan 16 piksèl yo nou etabli orijinal nan nouvo valè nou an nan 20 piksèl.
Ajoute plis Styles
Ou ka mete kòm règ CSS anpil nan sa a Query Media jan sa nesesè yo ajiste vizyèl aparans vizyèl ou a. Pou egzanp, si ou te vle pa sèlman ogmante font-gwosè a 20 piksèl, men tou, chanje koulè a nan tout paragraf nwa (# 000000), ou ta ka ajoute sa a:
@ media ekran ak (min-lajè: 1000px) {kò {font-size: 20px; } p {koulè: # 000000; }}Ajoute plis Queries Media
Anplis de sa, ou ka ajoute plis Queries Media pou chak gwosè pi gwo, ajoute yo nan fèy style ou tankou sa a:
@ media ekran ak (min-lajè: 1000px) {kò {font-size: 20px; } p {koulè: # 000000; {} ekran ekran ak (min-lajè: 1400px) {kò {font-size: 24px; }}Premye Queries yo Media ta choute nan nan 1000 piksèl lajè, chanje gwosè a font a 20 piksèl. Lè sa a, yon fwa navigatè a te pi wo a 1400 piksèl, gwosè a font ta chanje ankò nan 24 piksèl. Ou ta ka ajoute kòm anpil Queries Media jan sa nesesè pou sit entènèt patikilye ou.
Min-Lajè ak Max-Laj
Gen jeneralman de fason yo ekri Media Queries - lè l sèvi avèk "min-lajè" oswa ak "max-lajè". Se konsa, lwen, nou te wè "min-lajè" nan aksyon. Sa a lakòz Queries yo Media yo pran efè yon fwa te yon navigatè rive nan omwen ke minimòm lajè. Se konsa, yon rechèch ki itilize "min-lajè: 1000px" ap aplike lè navigatè a se omwen 1000 piksèl lajè. Sa a style nan Media Query yo itilize lè ou ap bati yon sit nan yon fason "mobil-premye".
Si ou itilize "max-lajè", li ap travay nan fason opoze a. Yon Media Query nan "max-lajè: 1000px" ta aplike yon fwa navigatè a te tonbe anba a gwosè sa a.
Konsènan ansyen navigatè yo
Yon defi ak Media Queries se mank de sipò nan vèsyon ki pi ansyen sou Internet Explorer. Erezman, gen polyfills ki disponib ki ka patch sipò pou Media Queries nan sa yo navigatè pi gran, ki pèmèt ou sèvi ak yo sou sit entènèt jodi a pandan y ap toujou asire ke ekspozisyon an nan sit sa a pa gade kase nan pi gran lojisyèl navigatè.
Edited by Jeremy Girard sou 1/24/17