Unaandikaje Maswali ya CSS Media?

Sura ya maandishi kwa maswali ya minne upana na max-width

Usanidi wa wavuti wa shukrani ni mbinu ya kujenga tovuti za wavuti ambapo kurasa hizo zinaweza kubadilisha mpangilio wao na kuonekana kulingana na ukubwa wa skrini ya mgeni . Skrini kubwa zinaweza kupokea mpangilio unaofaa kwa maonyesho makubwa zaidi wakati vifaa vidogo, kama simu za mkononi, vinaweza kupokea tovuti hiyo hiyo iliyopangwa kwa namna inayofaa kwa skrini ndogo. Njia hii hutoa uzoefu bora kwa watumiaji wote na inaweza hata kusaidia kuboresha rankings tafuta injini . Sehemu muhimu ya kubuni mtandao wa msikivu ni Maswala ya CSS Media.

Maswali ya Vyombo vya habari ni kama kauli ndogo ya masharti ndani ya faili ya CSS ya tovuti yako, huku kuruhusu kuweka baadhi ya sheria za CSS ambazo zitachukua tu athari wakati mara moja hali imekamilika - kama wakati ukubwa wa skrini uli juu au chini ya vizingiti fulani.

Maswali ya Vyombo vya Habari katika Kazi

Kwa hiyo unatumiaje Maswali ya Vyombo vya habari kwenye tovuti? Hapa ni mfano rahisi sana:

1. Ungeanza na waraka wa HTML uliofanywa vizuri bila ya mitindo yoyote ya kuona (hiyo ndiyo CSS ni ya)
2. Katika faili yako ya CSS, ungeanza kama unavyofanya kawaida kwa kupiga picha ukurasa na kuweka msingi wa jinsi tovuti itaangalia. Sema unataka ukubwa wa font wa ukurasa kuwa pixels 16, unaweza kuandika hii CSS: mwili {font-size: 16px; }
3. Sasa, unaweza kutaka kuongeza ukubwa wa font kwa skrini kubwa ambazo zina mali nyingi za kufanya hivyo. Hii ndio ambapo Maswali ya Vyombo vya habari yanaingia. Ungependa kuanza Swali la Vyombo vya Habari kama hii: @media screen na (min-width: 1000px) {}
4. Hii ni syntax ya Maswali ya Vyombo vya Habari. Inaanza na @media ili kuanzisha Swali la Vyombo vya habari yenyewe. Kisha uweka "aina ya vyombo vya habari", ambayo katika kesi hii ni "skrini". Hii inatumika kwa skrini za kompyuta za kompyuta, vidonge, simu, nk Hatimaye, unamalizia Maswali ya Vyombo vya Habari na "kipengele cha vyombo vya habari". Katika mfano wetu hapo juu, hiyo ni "katikati ya upana: 1000px". Hii inamaanisha kuwa Maswali ya Vyombo vya Habari yatapiga kwa maonyesho na upana wa chini wa saizi 1000 pana.

1. Baada ya vipengele hivi vya Maswali ya Vyombo vya Habari, unaongezea ufunguzi wa kufungua na kufunga sawa na yale unayofanya katika utawala wowote wa CSS.
2. Hatua ya mwisho kwa Maswala ya Vyombo vya Vyombo vya habari ni kuongeza sheria za CSS ambazo unataka kutumia wakati hali hii imekwisha. Unaongeza sheria hizi za CSS kati ya mashimo yaliyotengenezwa ambayo hufanya Maswali ya Vyombo vya Habari, kama hii: @media screen na (min-width: 1000px) {body {font-size: 20px; }
3. Wakati masharti ya Swali la Vyombo vya Habari yanapatikana (dirisha la kivinjari ni angalau saizi 1000 pana), mtindo huu wa CSS utachukua athari, kubadilisha ukubwa wa font wa tovuti kutoka saizi 16 ambazo tumeanzisha awali kwa thamani yetu mpya ya pixels 20.

Kuongeza Mitindo Zaidi

Unaweza kuweka sheria nyingi za CSS ndani ya Maswali ya Vyombo vya Habari kama inahitajika kurekebisha kuonekana kwa tovuti yako ya Visual. Kwa mfano, ikiwa unataka sio tu kuongeza ukubwa wa font kwa saizi 20, lakini pia ubadilisha rangi ya aya zote kwa nyeusi (# 000000), unaweza kuongeza hii:

@media screen na (min-width: 1000px) {mwili {font-size: 20px; } {rangi: # 000000; }}

Inaongeza Maswali Zaidi ya Vyombo vya Habari

Zaidi ya hayo, unaweza kuongeza Maswali zaidi ya Vyombo vya habari kwa kila ukubwa mkubwa, akiongeza kwenye karatasi yako ya mtindo kama hii:

@media screen na (min-width: 1000px) {mwili {font-size: 20px; } {rangi: # 000000; {} @media skrini na (upana wa chini: 1400px) {mwili {font-size: 24px; }}

Maswali ya kwanza ya Vyombo vya habari yanapiga kura kwa saizi 1000 pana, kubadilisha ukubwa wa font hadi saizi 20. Kisha, mara moja kivinjari kilikuwa juu ya saizi 1400, ukubwa wa font utabadilika tena kwa saizi 24. Unaweza kuongeza Maswali mengi ya Vyombo vya habari kama inahitajika kwenye tovuti yako maalum.

Urefu wa Kidogo na Urefu wa Max

Kwa ujumla kuna njia mbili za kuandika Maswali ya Vyombo vya habari - kwa kutumia "upana wa dakika" au kwa "max-upana". Hadi sasa, tumeona "upana wa dakika" katika hatua. Hii inasababisha Maswali ya Vyombo vya habari kuchukua matokeo mara moja kivinjari kimefikia angalau upana wa kiwango cha chini. Kwa hivyo swala ambalo linatumia "min-upana: 1000px" litatumika wakati kivinjari ni angalau saizi 1000 pana. Mtindo huu wa Maswala ya Vyombo vya Habari hutumiwa unapojenga tovuti kwa njia ya "simu ya kwanza".

Ikiwa unatumia "max-upana", inafanya kazi kwa namna tofauti. Swali la Vyombo vya Vyombo vya "max-width: 1000px" litatumika wakati kivinjari kimeanguka chini ya ukubwa huu.

Kuhusu Wavinjari Wazee

Changamoto moja na Maswala ya Vyombo vya Habari ni ukosefu wao wa msaada katika matoleo ya zamani kwenye Internet Explorer. Kwa shukrani, kuna vyenye polyfills zilizopatikana ambazo zinaweza kuunga mkono Msaada wa Vyombo vya Habari katika vivinjari wale wa zamani, kukuwezesha kuitumia kwenye tovuti leo huku ukihakikisha kuwa kuonyesha tovuti hiyo haitaonekana kuvunjika katika programu ya kivinjari kikubwa.

Iliyotengenezwa na Jeremy Girard mnamo 1/24/17