Вэб хөтөчүүд хувьсагчийг ашиглан дэлгэцийг хэрхэн тодорхойлж байгааг мэдэж аваарай
Хариуцлагатай вэб дизайнтай олон оюутнууд өргөн утгатай утгуудыг ашиглахад хүндрэлтэй байдаг. Тодруулбал, хөтөч эдгээр хувьсагчыг хэрхэн тооцдог талаар төөрөгдөл бий. Доорх хэсгүүдэд хариу үйлдэл сайтай вэбсайт дахь хувиар тооцоолсон хувь хэмжээний дэлгэрэнгүй тайлбарыг олох болно.
Өргөн хэрэглээний параметрүүдийг ашиглах нь
Пикселийг өргөн утга болгон ашиглах үед үр дүн маш энгийн байдаг. Хэрэв та баримтын толгой хэсэгт 100 пиксел өргөн элементийн өргөний хэмжээг тохируулахдаа CSS ашигладаг бол уг элемент нь вэбсайтын агуулгын эсвэл хөлийн хэсэг эсвэл бусад хэсэгт 100 пиксел өргөнтэй байх хэмжээтэй ижил хэмжээтэй байх болно. хуудас. Пикселүүд нь үнэмлэхүй утга бөгөөд 100 пиксел нь 100 пиксел байгаа эсэхээс үл хамааран таны документэд элемент гарч ирнэ. Харамсалтай нь, пикселийн утгыг ойлгоход амархан боловч хариу өгөх вэбсайтуудад сайн ажиллахгүй байна.
Ethan Marcotte нь "хариу үйлдлийн веб дизайн" гэсэн нэр томъёог гаргаж, энэ аргыг тайлбарлахдаа 3 гол зарчмыг агуулсан:
- Шингэний сүлжээ
- Шингэний хэрэгсэл
- Хэвлэлийн мэдээлэл
Эхний хоёр цэг, шингэний сүлжээ, шингэний зөөвөрлөлтийг тоон утгын оронд хувь хэмжээгээр нь ашиглана.
Өргөн зурвасын утгуудын хувийг ашиглах
Хэрэв та элементийн өргөнийг тогтоохын тулд хувьсагчийг ашиглавал элементийн харуулах бодит хэмжээ нь баримтад байгаа эсэхээс хамаарч өөр өөр байх болно. Хувьсагч нь харьцангуй үнэ цэнэ, дэлгэцэн дээр байгаа хэмжээ нь таны баримтад байгаа бусад элементүүдтэй харьцуулах утгатай.
Жишээлбэл, хэрэв та зургийн өргөнийг 50% болгон тохируулж байвал энэ нь зураг хэвийн хэмжээнээсээ хагасыг харуулна гэсэн үг биш юм. Энэ бол түгээмэл буруу ойлголт юм.
Хэрэв зургийг 600 пиксел өргөнтэй бол 50% үүнийг харуулахын тулд CSS-ийн утгыг ашиглаж байгаа бол энэ нь вэб хөтөч дээр 300 пиксел өргөн байх болно гэсэн үг биш юм. Энэхүү хувь хэмжээ нь тухайн дүрсийн эх хэмжээг биш харин агуулж буй элемент дээр үндэслэн тооцоолно. Хэрвээ савлалт (хуваах буюу өөр бусад HTML элемент байж болно) 1000 пиксел өргөн байвал тухайн зураг нь тухайн савны өргөний 50% -ийг 500 пиксел дээр харуулна. Хэрвээ элемент нь 400 пиксел өргөн байвал тухайн зураг нь зөвхөн 200 пиксел дээр байрлана. Энд байгаа зураг 50% хэмжээтэй бөгөөд энэ нь түүнд агуулагдсан элементээс бүрэн хамаарна.
Хариуцлагатай загвар нь шингэн юм. Дэлгэцийн хэмжээ / төхөөрөмжийн өөрчлөлтийг харахад хэмжээ болон хэмжээ өөрчлөгдөх болно. Хэрэв та үүнийг физик, вэбсайт бус гэж үзвэл энэ нь баглаа боодлын материалын дүүргэгч картон хайрцагтай адил юм. Хэрвээ хайрцаг тухайн материалын хагасыг дүүргэсэн гэж үзвэл таны хэрэгцээ шаардагдах хэмжээ хайрцагны хэмжээнээс хамаарч өөр өөр байх болно. Вэб дизайн дахь хувьсагчийн өргөний хувьд мөн адил байдаг.
Бусад булгууд дээр тулгуурласан хувь
Зураг / контейнерийн жишээнд би элементийн хувьд пиксел утгыг ашиглан хариуны дүрс хэрхэн харагдахыг харуулсан. Бодит байдал дээр агуулагдах элементийг мөн хувиар, зураг эсвэл бусад элементүүд доторхи агуулгын хувь дээр тулгуурлан тэдгээрийн утгыг олох болно.
Практик дээр үүнийг харуулсан өөр нэг жишээ энд байна.
Бүх вэбсайт нь "контейнер" (вэб дизайны нийтлэг практик) ангилалд багтах вэбсайттай гэж хэлээрэй. Энэ хэлтэс нь 3 босоо баганаар харагдана. HTML иймэрхүү харагдах болно:
Одоо та "контейнер" хэлтсийн хэмжээг 90 хувиар хэлэхийн тулд CSS ашиглаж болно. Энэ жишээнд контейнерийн хэлтэс нь өөр ямар нэг тодорхой утга тавиагүй байгаа биеийг эс тооцвол өөр нэг элементгүй байна. Анхдагч байдлаар, байгууллага браузерын цонхны 100% -ийг төлнө. Тиймээс "контейнер" хуваах хувь нь хөтчийн цонхны хэмжээн дээр үндэслэх болно. Энэ хөтөчийн цонхны хэмжээ өөрчлөгдөхийн хэрээр энэ "контейнер" -ийн хэмжээтэй болно. Хэрвээ хөтөчийн цонх нь 2000 пиксел өргөн байвал энэ хэлтэс нь 1800 пикселээр харагдана. Энэ нь хөтчийн хэмжээтэй адил 2000 (2000 х .90 = 1800) -ийн 90% -ийг тооцоолоход тооцогддог.
Хэрэв "контейнер" доторх "контакт" -ын хэсгүүдийнх нь 30% -тай тэнцүү бол эдгээр жишээнүүд нь тус бүрдээ 540 пиксел өргөнтэй байна. Энэ нь контейнерийн контейнерт (1800 х .30 = 540) 30% -ийн тоогоор тооцдог. Хэрэв бид савны эзлэх хувь хэмжээг өөрчилсөн бол эдгээр дотоод хувиуд нь агуулахаас хамаарах хэмжээнээс хамааран өөрчлөгдөнө.
Браузерын цонх нь 2000 пиксел өргөнтэй байгаа гэж бодъё. Гэхдээ бид агуулахын хувь хэмжээг 90% -иас 80% болгон өөрчлөөрэй. Энэ нь одоо 1600 пиксель өргөнтэй (2000 x .80 = 1600) болно гэсэн үг юм. Хэдийгээр бид 3 "колонк" хуваагдлын CSS-г өөрчлөхгүй ч гэсэн тэдгээрийг 30% -иар хэвээр нь үлдээж чадсан ч тэдгээрийг агуулж байгаа элемент нь агуулагдах элементээс өөрөөр өөрчлөгдөх болно. Эдгээр 3 хэсгүүд нь одоо тус бүр 480 пиксел өргөн, 1600-ын 30%, эсвэл савны хэмжээ (1600 х .30 = 480) болно.
Үүнийг цааш нь авч үзээд, хэрэв эдгээр "коллекц" -ын аль нэгийн дотор дүр төрхийг олсон бол тухайн зургийг хувь хэмжээгээр нь хувиарлаж байсан бол түүний хэмжээ нь "кол" болох юм. Энэ нь "col" хуваагдал нь өөрчлөгдсөний улмаас түүний дотор дүр төрх өөрчлөгдөнө. Хэрэв хөтөчийн хэмжээ эсвэл "контейнер" өөрчлөгдсөн бол энэ нь "col" гурван хуваагдалд нөлөөлөх бөгөөд ингэснээр "col" доторх зургийн хэмжээг өөрчлөх болно. Энэ нь хувь хэмжээг тулгуурласан хэмжээний үнэлгээ юм.
Валютын доторх элемент нь түүний өргөнийг ашигладаг бол элемент нь хуудсын тэмдэглэгээнд байрлаж буй нөхцөлийг ойлгох хэрэгтэй.
Дүгнэлт
Хувилбарууд нь хариу вэбсайтуудын байршлыг бий болгоход чухал үүрэг гүйцэтгэдэг. Та зургуудаа бодитойгоор хэмжиж эсвэл хувь хэмжээгээр нь хэмжиж байгаа эсэх нь хэмжигдэхүүнүүд нь өөр хоорондоо харьцангуй харьцангуй үнэн зөв шингэнийг бий болгож байгаа эсэх, эдгээр тооцоо нь таны хүссэнээр хүрэхийн тулд шаардлагатай болно гэдгийг ойлгох хэрэгтэй.