Syntax ji bo pirsên medyayê yên du min-width û max-width
Pêşniyarên malpera berbiçav ew e ku nêzikên malperên avahiyê hene ku derê rûpelan dikarin bi rengek zivistanê sererast bikin û nîşanî xwe biguherînin. Grafikên mezin dikarin dikarin bi pêşniyarên wan ên pêşniyarkirî wergirtin, lêgerîna biçûk, wekî mîna telefona mobîl, malpera heman heman malperê dikarin bi awayekî ku ji bo ku di binenivîsa piçûk de, bi awayek xuya dibe. Ev nêzîk ji bo hemî bikarhênerên tecrûbeya çêtirîn dide pêşkêş dike û ew jî dikare alîkariyê çêbikin . Beşek girîng a nimûne web designê ye CSS Media Queries.
Daxuyaniya Medyayê li gor pelên CSS-ê yên we ya malpera CSS-ê heye, ku hûn qaîdeyên CSS-ê ku bi tenê hinek rewşê tête bandor bigirin, bi awayek bandor bikin, wek ku hûn qasek hûrsek li jor û hûrsên hûrgelan hene.
Query Media In Activities
Ji ber vê yekê hûn çawa li malpera medyayê pirsên bikar bînin? Li vir nimûne pir hêsan e:
- Hûn dikarin bi belgeya HTML-ê ve bê destnîşan bikin ji hêla her celebên vîdyoyê (ku çi ye ku ji bo CSS çi ye)
- Di pelê xwe ya CSS de, hûn ê wek we bi gelemperî bi bi rûpela stenbolê bikin û bingeha bingehîn ji bo malperê çawa dê bibînin. Bêjin ku hûn pîvana pelê ya rûpelê ya 16 pencre dixwazin, hûn dikarin vê CSS'yê binivîse: body {font-size: 16px; }
- Niha, hûn dixwazin ku ji bo klavyeyên mezin ên ku sîteyê neqewimin e ku biqewiminin ku pîvana fontê zêde bikin. Vê derê ku Medya Query ji kick in. Tu dixwazî medyek Media Query start like this: screen screen @media and (min-width: 1000px) {}
- Ev syntax a Media Query e. Ew bi @media re dest pê dike ku bixweberkirina xwe ya Medyayê. Piştre hûn "cureyên medyayê" de, ku di vê rewşê de "screen" ye. Ev li ser vîdyoyên komputerê, sifrê, telefon û hwd. Di dawiyê de, hûn bi Media Query bi "taybetmendiya çapemeniyê" bi dawî bibe. Di nimûneya me de jor, ku "diya-çarçove: 1000px" ye. Ev tê wateya ku Medya Query dê ji bo pêşniyarên herî kêmî ya 1000 pîlek pîrek nîşan bide.
- Piştî van hûrgelên Medyayê Query, hûn bi heman rengî vekin û dorpêçkirina çermê wekû ku hûn ê di rêveberiya CSS-ya normal de normal bike.
- Dema ku dawî ya Medya Query e ku ev rêbazên CSS ve zêde bike ku hûn bixwazin piştî ku hûn vê rewşê bicih bikin bixwazin. Hûn van rêbazên CSS-ê di navbera kûçikên cûrbazê de ku ji vê rexneya Media Query re biafirîne, ji vê yekê: screen-@media-screen and (min-width: 1000px) {body {font-size: 20px; }
- Dema ku şertên Media Query bi hev re têne kirin (xuyakirina gerdûnî herî kêm 1000 pencreş e), ev şêweya CSS-ê wê bandor bibe, pîvana malpera me ya ji malpera me ya 16 pîklên guhertin ku me bi nirxa me ya nû 20 pixel ava kiriye.
Add More Styles
Hûn dikarin li gor vê medyaya CSS-ê de li ser vê qeydê bikişînin ku pêwîst e ku hûn nîşan bide dîtina malpera xwe ya dîtir. Wekî nimûne, heke hûn ne tenê ne tenê fonn-sîbûnê 20 pîp zêde bikin, lê rengê hemî paragrafên bi black (# 000000) biguherînin, hûn dikarin vê zêde bikin:
@screen @media and (min-width: 1000px) {body {font-size: 20px; } p {reng: # 000000; }}Query Media Queries added
Additionally, hûn dikarin ji bo her mezintirîn her mezintir zêdetir Media Medresan zêde bikin, û ew bi şêweya xwe ya şêweyê wiha digotin:
@screen @media and (min-width: 1000px) {body {font-size: 20px; } p {reng: # 000000; {} @ screen-media û (min-width: 1400px) {body {font-size: 24px; }}Pirsgirêka Medyayê ya yekemîn dê di 1000 pîlan pîrek deyne, pîvana fontê bi 20 pixel guhertin. Hingê, gava ku gerokê 1400 pencilan bû, hebê fontê dê dîsa bi 24 pixel guhertin. Hûn dikarin ji bo malpera taybetî ya we hewceyê ku bi piraniya medyayê pirsan zêde bike.
Min-Width û Max-Width
Bi gelemperî du awayan têne nivîsandin ku medyayê pirsên xwe binivîse - bi "min-width" an bi "max-width" bikar bînin. Heya niha, em di "çalakiya min de" de çalakiyek dîtin. Ji ber vê yekê dibe ku Media Queries ji bo gerîla gihîştî herî kêm ya çarçoveyê gihîştî careke din bandorek bigirin. Ji ber vê yekê pirsek ku "min-width: 1000px" tê bikaranîn dê dê dema ku geroktarê herî kêm 1000 pîkal e. Ev şêweya Media Query dema ku hûn di malpera "mobîl-pêşîn" de çêbikin ava dikin.
Heke hûn "max-width" bikar bînin, ew di rewşê dijber de dixebite. A Media Query of "max-width: 1000px" dê piştî ku vê geroka jêrîn berbi gavê gihîştî bêdeng bike.
Li Derbarê Browserên Mezin
Rengê ku bi Media Queries re ji hevpeymanên kevn ên li ser Internet Explorer ne piştgiriya wan e. Bi şiklê, hejmarek heye ku ji bo Medyayên Query ji bo wan digel gerokên kevn ên piştevanîya piştgiriyê dikin, ku hûn bi wan re li ser malperên bikar tînin bikar bînin, lê hê jî hîn bikin ku hînkirina sîteyê tête nivîsbarê nivîsbarê gerdûnî ne.
Edited by Jeremy Girard at 1/24/17