Nkọwapụta maka maọbụ mgbasa ozi min na obosara na obosara
Ntugharị weebụ a na-anabata agbanwe bụ ịbịaru ụlọ akwụkwọ weebụ ebe akwụkwọ ndị ahụ nwere ike ịgbanwe mgbanwe na ọdịdị ha dị na ihuenyo nke onye ọbịa . Nnukwu ihuenyo nwere ike ịnweta nhazi nke ruru na ngosipụta ndị dị ukwuu ka obere ngwaọrụ, dị ka igwe igwe, nwere ike ịnweta otu ebe nrụọrụ weebụ a na-ahazi n'ụzọ kwesịrị ekwesị maka obere ngebichi ahụ. Ụzọ a na-enye ahụmịhe ọrụ nke kachasị maka ndị ọrụ niile, ọ pụkwara inye aka melite arụmọrụ search engine . Otu akụkụ dị mkpa nke ntanetị webmail bụ CSS Media Ajụjụ.
Ajụjụ ntanetị dị ka obere okwu n'ime faịlụ CSS gị, na-enye gị ohere ịtọ ụfọdụ CSS iwu nke ga - emetụta ozugbo otu ọnọdụ ga - ezute ma ọ bụ n'okpuru ọnụ ụzọ ụfọdụ.
Ajụjụ Mgbasa Ozi na Omume
Ya mere, olee otu i si eji akwukwọ mgbasa ozi na weebụsaịtị? Nke a bụ ihe atụ dị mfe:
- Ị ga-amalite site na akwụkwọ HTML a maziri nke ọma na ụdị ọ bụla anya (nke ahụ bụ CSS maka)
- Na faịlụ CSS gị, ị ga-ebido dị ka ị na-emekarị site na ịmepụta ibe na ịtọ ntọala maka otú weebụ ga-esi ele anya. Gwa na ị chọrọ ka ụdị nhazi nke ibe ahụ dị 16 pikselụ, ị nwere ike ide CSS a: ahụ {font-size: 16px; }
- Ugbu a, ị nwere ike ịchọọ ọnụ ọgụgụ ahụ maka nnukwu ákwà ndị nwere nnukwu ụlọ na-eme ya. Nke a bụ ebe Ajụjụ Mgbasa ozi na-abanye na. Ị ga - amalite Ajụjụ Ajụjụ dị ka nke a: ákwà ngebichi na (min-width: 1000px) {}
- Nke a bụ mmepụta nke Ajụjụ Ajụjụ. Ọ na-amalite na ozugbo iji guzobe Media Ajụjụ n'onwe ya. Ọzọ i setịpụrụ "ụdị mgbasa ozi," nke dị na nke a bụ "ihuenyo". Nke a na-emetụta ntanye desktọọpụ desktọọpụ, mbadamba, igwe, wdg. N'ikpeazụ, ị na-ejedebe Media Query na "ihe mgbasa ozi". N'ihe atụ anyị n'elu, nke ahụ bụ "etiti obosara: 1000px". Nke a pụtara na Ajụjụ Mgbasa Ozi ga-abanye maka ngosipụta na obosara kachasị nke 1000 pixels n'obosara.
- Mgbe ihe ndị a nke Media Query, ị gbakwunye ihe mmeghe na mmechi ihe nkwado yiri ihe ị ga-eme na iwu CSS ọ bụla.
- Nzọụkwụ ikpeazụ maka Ajụjụ Ajụjụ bụ ịgbakwunye iwu CSS ịchọrọ itinye ozugbo mgbe ọnọdụ a zutere. Ị gbakwunye iwu CSS ndị a n'etiti agbatị mgbatị nke mejupụtara Media Query, dị ka nke a: ihuenyo ozugbo na (min-width: 1000px) {ahụ {font-size: 20px; }
- Mgbe ọnọdụ nke Media Ajụjụ na-ezute (windo windo dịkarịa ala 1000 pixels n'obosara), ụdị CSS a ga-arụ ọrụ, na-agbanwe ọkwa ntanetị anyị site na 16 pikselụ anyị kwalitere na uru ọhụrụ nke 20 pikselụ.
Na-agbakwụnye Ụdị Nhọrọ
Ị nwere ike idebe ọtụtụ CSS iwu n'ime Media Ajụjụ a dị mkpa ka ị gbanwee ihu igwe gị. Dị ka ọmụmaatụ, ma ọ bụrụ na ịchọrọ ọ bụghị nanị na ịme ka font size ahụ dị 20 pixels, ma gbanwee agba nke paragraf niile na nwa (# 000000), ịnwere ike itinye nke a:
mgbanaka ozugbo na (min-width: 1000px) {ahụ {font-size: 20px; } p {agba: # 000000; }}Na-agbakwụnye Ajụjụ Ịntanetị Ndị Ọzọ
Tụkwasị na nke a, ịnwere ike ịgbakwunyekwuo Ajụjụ Mgbasa Ozi maka oke ọ bụla, na-agbakwụnye ha na mpempe akwụkwọ gị dị ka nke a:
mgbanaka ozugbo na (min-width: 1000px) {ahụ {font-size: 20px; } p {agba: # 000000; {} ogwe aka na - (min-obosara: 1400px) {ahụ {font-size: 24px; }}Mkpọsa mgbasa ozi mbụ ga-agbanye na 1000 pixels n'obosara, na-agbanwe agbanwe font na 20 pikselụ. Mgbe ahụ, ozugbo ihe nchọgharị ahụ karịrị elu 1400 pikselụ, ụda nha ga-agbanwe ọzọ na 24 pikselụ. Ịnwere ike ịgbakwunye ọtụtụ Ajụjụ Mgbasa Ozi dị ka mkpa maka ebe nrụọrụ weebụ gị.
Min-Width na Max-Width
E nwere ụzọ abụọ iji dee Mmasị Ajụjụ - site na iji "min-obosara" ma ọ bụ "max-obosara". Ka ọ dị ugbu a, anyị ahụla "min-n'obosara" n'ọrụ. Nke a na-eme ka Ajụjụ Mgbasa Ozi mezuo otu ugboro ma ọ bụrụ na ihe nchọgharị abanyela ma ọ dịkarịa ala na obosara kachasị. Ya mere ajuju nke na-eji "min-obosara: 1000px" ga-etinye aka mgbe ihe nchọgharị dịkarịa ala 1000 pixels n'obosara. A na-eji usoro a nke Media Query mgbe ị na-ewu ụlọ na saịtị "mobile-first".
Ọ bụrụ na ị na-eji "max-obosara", ọ na-arụ ọrụ n'ụzọ dị iche. Ajuju mgbasa ozi nke "max-width: 1000px" ga-etinye ozugbo ihe nchọgharị adaala n'okpuru nha a.
Banyere Ndị Nchọgharị Okenye
Otu ihe ịma aka na Ajụjụ Mgbasa Ozi bụ enweghị nkwado ha na nsụgharị ochie na Internet Explorer. Obi dị m ụtọ na e nwere ọtụtụ ihe ndị nwere ike ịchọta nkwado maka Ajụjụ Mgbasa ozi na ndị ochie ahụ na-eme nchọgharị, na-enye gị ohere iji ha na weebụsaịtị ebe a ka na-achọpụta na ngosipụta nke saịtị ahụ adịghị ada mbà na ngwanrọ nchọgharị ochie.
Edited by Jeremy Girard na 1/24/17