Hakanan haɗin gwargwadon rahoto na labaran min-nisa da ƙananan fadin nesa
Shafin yanar gizon yanar gizon yana da kyau wajen gina ɗakunan yanar gizon inda waɗannan shafukan zasu iya canza yanayin su da kuma bayyanar da ke kan girman girman baƙo . Ƙananan fuska zasu iya samun layout da ya dace da wadanda suka fi girma yayin da ƙananan na'urori, kamar wayoyin hannu, zasu iya samun wannan shafin yanar gizon da aka tsara a hanyar da ta dace da wannan ƙaramin allon. Wannan hanya ta samar da kyakkyawan kwarewar mai amfanin ga duk masu amfani kuma zai iya taimakawa wajen inganta wallafawar injiniyar injiniya . Wani ɓangaren muhimmin sashin yanar gizo shine CSS Media Queries.
Tambayoyin Watsa Labarun kamar ƙananan maganganu ne a cikin fayil ɗin CSS na yanar gizonku, yana ba ku damar saita wasu ka'idoji na CSS waɗanda za su shawo kan sau ɗaya kawai idan wani yanayi ya haɗu - kamar lokacin da girman allo yana sama ko a kasa wasu matuka.
Binciken Watsa Labaru a Ayyuka
To, yaya zaka yi amfani da tambayoyin Mai jarida akan shafin yanar gizon? Ga misali mai sauƙi:
- Za ku fara da takardun daftarin aiki na HTML kyauta ta kowane nau'i na gani (wancan shine abin da CSS yake)
- A cikin fayil na CSS, za ku fara kamar yadda kuke yi ta hanyar salo da shafi kuma ku kafa tushen don yadda shafin yanar gizon zai duba. Ka ce kana so girman girman layin shafi don zama 16 pixels, zaka iya rubuta wannan CSS: jiki [font-size: 16px; }
- Yanzu, kuna iya ƙara girman girman girman don girman fuska wanda ke da dukiya don yin hakan. Wannan shi ne inda Fayilolin Intanit ke shiga. Za ka fara Media Query kamar wannan: allon taɗi da (min-nisa: 1000px) {}
- Wannan shi ne haɗin da ake kira Media Media. Yana farawa tare da jarraba don kafa Media Query kanta. Kayi gaba da saita "nau'in watsa labaru", wanda a wannan yanayin shine "allon". Wannan ya shafi fuskokin kwamfutar kwamfuta, kwamfutar hannu, wayoyi, da dai sauransu. A karshe, za ku ƙare Media Query tare da "fasalin watsa labarai". A misali na sama, wannan shine "tsakiyar-nisa: 1000px". Wannan yana nufin cewa Media Media zai shiga cikin nuni tare da ƙananan nisa 1000 pixels fadi.
- Bayan waɗannan abubuwa na Media Query, za ka ƙara bugun budewa da rufewa da rufewa kamar abin da za ka yi a kowace dokar CSS ta al'ada.
- Mataki na karshe zuwa Media Query shi ne don ƙara dokokin CSS da kake so ka yi amfani da zarar an cika wannan yanayin. Ka ƙara waɗannan sharuɗɗun CSS tsakanin ƙuƙwalwar ƙirar da ta ƙunshi Media Query, kamar wannan: allon ta atomatik da (min-nisa: 1000px) {jiki {font-size: 20px; }
- Lokacin da aka cika ka'idodin Media Query (maɓallin binciken shine akalla 1000 pixels fadi), wannan tsarin CSS zai yi tasiri, canza canjin jimlar shafinmu daga 16 pixels da muka kafa a asali zuwa sabon darajar 20 pixels.
Ƙara Karin Ƙira
Kuna iya sanya dokoki CSS da yawa a cikin wannan Binciken Media don buƙatar bayyanar shafin yanar gizon ku. Alal misali, idan kuna so ba kawai ƙara yawan fayiloli ba zuwa 20 pixels, amma kuma canza launin dukkan sassan layi zuwa baki (# 000000), zaka iya ƙara wannan:
lambar sirri (min-width: 1000px) {jiki {font-size: 20px; } p {launi: # 000000; }}Ƙara ƙarin tambayoyin Mai jarida
Bugu da ƙari, za ka iya ƙara ƙarin tambayoyin Mai jarida don kowane girma mai girma, ƙara su zuwa takarda ɗinka kamar wannan:
lambar sirri (min-width: 1000px) {jiki {font-size: 20px; } p {launi: # 000000; {} aljihunan sirri da (min-nisa: 1400px) {jiki {font-size: 24px; }}Tambayoyi na farko na Media za su shiga cikin 1000 pixels fadi, canza launin font zuwa 20 pixels. Bayan haka, da zarar mai bincike ya fi sama da 1400 pixels, girman nauyin zai canza zuwa 24 pixels. Kuna iya ƙara yawan tambayoyin Mai jarida kamar yadda ake bukata don shafin yanar gizonku.
Min-Width da Max-Width
Akwai hanyoyi guda biyu don rubuta Queries Media - ta amfani da "min-nisa" ko tare da "max-nisa". Ya zuwa yanzu, mun ga "min-nisa" a cikin aikin. Wannan yana sa tambayoyin mai jarida suyi tasiri a yayin da mai bincike ya kai akalla ƙananan nisa. Don haka tambaya da ta yi amfani da "min-width: 1000px" zai yi amfani da lokacin da mai bincike ya kasance akalla 1000 pixels fadi. Ana amfani da wannan salon Media Query lokacin da kake gina wani shafin a cikin hanyar "ta hannu-farko".
Idan ka yi amfani da "max-nisa", yana aiki a cikin m hanya. Tambayar Watsa Labaru na "max-width: 1000px" zai yi amfani da sau ɗaya idan mai bincike ya fadi a kasa da wannan girman.
Game da tsofaffi masu bincike
Ɗaya daga cikin kalubale tare da Media Queries shine rashin goyon baya a cikin tsofaffi tsoho akan Internet Explorer. Abin godiya, akwai wasu nau'o'in da za su iya tallafawa tallafin Binciken Watsa bayanai a waɗannan masu bincike na tsofaffi, ba ka damar amfani da su a kan shafukan yanar gizo a yau yayin da har yanzu tabbatar da cewa nuni na wannan shafin ba ya yi watsi da software mai tsofaffi.
Edited by Jeremy Girard on 1/24/17