Kodi mumalemba bwanji CSS Media Queries?

Mphatikiti wa mafunso aŵiri-width ndi max-width mafunso

Kukonzekera kwa webusaiti ndi njira yopangira mawebusaiti omwe mapepalawa angasinthe maonekedwe awo ndi mawonekedwe awo pogwiritsa ntchito msinkhu wawonekera . Zojambula zazikulu zimatha kulandira chikhalidwe choyenerera ku mawonetsero akuluakulu pamene zipangizo zing'onozing'ono, monga mafoni a m'manja, zimatha kulandira webusaiti yomweyo yomwe ili yoyenera pawindo. Njira imeneyi imapereka mwayi wogwiritsira ntchito ogwiritsa ntchito bwino komanso ingathandize kuwongolera malo osaka . Mbali yofunika ya kumvetsera kwa webusaiti ndi CSS Media Queries.

Media Queries ili ngati mawu osamveka pokhapokha mkati mwa fayilo ya CSS yanu ya webusaitiyi, kukulolani kukhazikitsa malamulo ena a CSS omwe angakhudze kamodzi kokha ngati pali vuto linalake - monga ngati mawonekedwe a pawindo ali pamwamba kapena pansi pa malo ena.

Media Queries in Action

Ndiye mumagwiritsa ntchito bwanji Media Queries pa webusaitiyi? Pano pali chitsanzo chophweka:

1. Mungayambe ndi ndondomeko yabwino ya HTML yopanda maonekedwe (zomwe CSS ndizo)
2. Mu fayilo yanu ya CSS, mungayambe monga momwe mumachitira polemba mapepala ndi kuyika maziko a momwe webusaitiyi idzawonekera. Nenani kuti mukufuna kukula kwazithunzi za tsamba kukhala 16 pixels, mukhoza kulemba CSS: thupi {font-size: 16px; }}
3. Tsopano, mungafune kuwonjezera kukula kwazithunzi zazitsulo zazikulu zomwe muli ndi malo okonzera malo ambiri. Apa ndi kumene Media Queries ikulowetsamo. Mungayambe Media Query monga: @media screen ndi (min-width: 1000px) {}
4. Ichi ndicho chiganizo cha Media Query. Zimayamba ndi @media kukhazikitsa Media Query. Kenaka inu mumayika "mtundu wa mauthenga", omwe panopa ndi "chithunzi". Izi zikugwiritsidwa ntchito pa makompyuta apakompyuta, mapiritsi, mafoni, ndi zina. Pomalizira, mumathetsa Media Query ndi "TV". Mu chitsanzo chathu pamwamba, ndiko "pakatikati: 1000px". Izi zikutanthawuza kuti Media Query idzakhazikitsidwa kuti iwonetsere ndi maulendo ang'onoang'ono a pixel 1000.

1. Pambuyo pazinthu izi za Media Query, mumaphatikizapo kutsegula ndi kutseketsa nsalu zofanana ndi zomwe mungachite mu ulamuliro uliwonse wa CSS.
2. Gawo lomaliza ku Media Query ndi kuwonjezera malamulo a CSS omwe mukufuna kugwiritsa ntchito pokhapokha vutoli litakwaniritsidwa. Mukuwonjezera malamulowa a CSS pakati pa mapepala ozungulira omwe amapanga Media Query, monga: @media screen ndi (min-width: 1000px) {body {font-size: 20px; }}
3. Pamene zokhudzana ndi Media Query zimakwaniritsidwa (mawindo osatsegula ali osachepera 1000 pixels), chikhalidwe ichi cha CSS chidzagwira ntchito, kusintha kukula kwa mausitala athu pa tsamba 16 zomwe tinakhazikitsa pachiyambi mpaka phindu lathu latsopano la pixels 20.

Kuwonjezera Mitindo Yambiri

Mukhoza kukhazikitsa malamulo ambiri a CSS mkati mwa Media Query ngati mukufunikira kusintha maonekedwe a webusaiti yanu. Mwachitsanzo, ngati mukufuna kuwonjezera kukula kwa majambulizi mpaka ma pixelisi 20, komanso kusintha mtundu wa ndime zonse ku black (# 000000), mukhoza kuwonjezera izi:

@media screen ndi (min-width: 1000px) {body {font-size: 20px; } p {mtundu: # 000000; }}

Kuwonjezera Mafunso Owonjezeka Ambiri

Kuonjezerapo, mungathe kuwonjezera zina za Media Queries pa kukula kwake kwakukulu, kuwonjezera pa pepala lanu lachikhalidwe monga chonchi:

@media screen ndi (min-width: 1000px) {body {font-size: 20px; } p {mtundu: # 000000; {} @media screen ndi (min-width: 1400px) {thupi {font-size: 24px; }}

Choyamba Media Queries chikanakwera pa pixels 1000 lonse, kusintha kukula kwa mazenera kufika pa pixel 20. Kenaka, msakatuli ukakhala pamwamba pa mapikseli 1400, kukula kwazithunzi kungasinthe kachiwiri ku pixel 24. Mukhoza kuwonjezera ambiri a Media Queries ngati mukufunikira pa webusaiti yanu.

Kutalika Kwambiri ndi Max-Width

Pali njira ziwiri zolembera Media Queries - pogwiritsa ntchito "min-width" kapena "max-width". Pakalipano, tawonapo "mphindikati" mukugwira ntchito. Izi zimapangitsa Media Queries kukhazikika pomwe msakatuli wafika pokhapokha m'lifupi mwake. Kotero funso limene limagwiritsa ntchito "min-width: 1000px" lidzagwiritsidwa ntchito pamene osatsegula ali osachepera 1000 pixels lonse. Mtundu uwu wa Media Query umagwiritsidwa ntchito pamene mumanga malo mu "njira yoyamba".

Ngati mumagwiritsa ntchito "max-width", zimagwira ntchito mosiyana. Pepala la Ma Media la "max-width: 1000px" lingagwiritsidwe ntchito ngati msakatuli wagwera pansi pa kukula kwake.

Ponena za Asakatuli Akale

Vuto lina ndi Media Queries ndi kusowa kwawo kwa machitidwe akale pa Internet Explorer. Mwamwayi, pali polyfills yomwe imatha kuthandizira Media Queries m'masakatu akale aja, kukulolani kuzigwiritsa ntchito pa webusaiti lero pamene mukuwonetsetsa kuti mawonedwe a malowa sakuwoneka akusweka mu webusaiti yakale ya osatsegula.

Yosinthidwa ndi Jeremy Girard pa 1/24/17