Багийн гишүүдийн дэлгэрэнгүй хуудасны мэдрэмжтэй дизайн хийхэд медиа асуулга ямар үүрэг гүйцэтгэдэг вэ, тэдгээрийг CSS-д хэрхэн ашигладаг жишээг та өгч чадах уу?
Хэвлэл мэдээллийн асуулга нь хариу үйлдэл үзүүлэх дизайн, ялангуяа багийн гишүүдийн дэлгэрэнгүй хуудсанд хүрэх үндсэн бүрэлдэхүүн хэсэг юм. Эдгээр нь дэлгэцийн өргөн, өндөр, чиг баримжаа, нягтрал зэрэг хэрэглэгчийн төхөөрөмжийн онцлогт тулгуурлан тодорхой хэв маягийг ашиглах боломжийг хөгжүүлэгчдэд олгодог. Энэ нь вэб хуудас нь ширээний компьютер, таблет, ухаалаг гар утас зэрэг олон төрлийн төхөөрөмжид харагдахуйц үзэмжтэй, ажиллагаатай байхыг баталгаажуулдаг.
Хариуцлагатай дизайн нь харагдах орчинд тохируулан зохион байгуулалтад оруулдаг тул хэрэглэгчийн туршлагад чухал ач холбогдолтой. Энэхүү дасан зохицох чадварыг шингэн сүлжээний зохион байгуулалт, уян хатан зураг, CSS медиа асуулга ашиглан олж авдаг. Медиа асуулга нь тохирох нөхцлөөс хамааран өөр өөр CSS дүрмийг ашиглах боломжийг олгодог. Эдгээр нөхцлийг өргөн, өндөр, харьцаа гэх мэт медиа функцуудыг ашиглан тодорхойлдог.
Багийн гишүүдийн дэлгэрэнгүй хуудасны хувьд хэвлэл мэдээллийн асуулга нь контентыг өөр өөр хэмжээтэй дэлгэцийн хэмжээнд хүртээмжтэй, сайн зохион байгуулалттай байлгахад чухал үүрэг гүйцэтгэдэг. Жишээлбэл, ширээний компьютер дээр та хажуугийн самбар, том зураг, иж бүрэн текст бүхий нарийвчилсан харагдацыг харуулахыг хүсч болно. Гэсэн хэдий ч хөдөлгөөнт төхөөрөмж дээр элементүүдийг босоо байдлаар байрлуулж, зургийн хэмжээг багасгах замаар жижиг дэлгэцтэй тааруулахын тулд зохион байгуулалтыг хялбаршуулсан байх ёстой.
Хэвлэл мэдээллийн асуулга хэрхэн ажилладаг, тэдгээрийг CSS-д хэрхэн хэрэгжүүлэх талаар дэлгэрэнгүй тайлбарыг эндээс үзнэ үү.
Медиа асуулгын синтакс
Медиа асуулга нь медиа төрөл ба тодорхой медиа функцүүдийн нөхцөл байдлыг шалгадаг нэг буюу хэд хэдэн илэрхийллээс бүрдэнэ. Үндсэн синтакс нь дараах байдалтай байна.
css
@media media_type and (media_feature: value) {
/* CSS rules */
}
– `media_type`: Төхөөрөмжийн төрлийг (дэлгэц, хэвлэх гэх мэт) заана. Хариуцлагатай дизайн хийхэд ашигладаг хамгийн түгээмэл медиа төрөл бол "дэлгэц" юм.
– `media_feature`: Шалгах онцлогийг (өргөн, өндөр, чиг баримжаа гэх мэт) тодорхойлно.
– `утга`: Харьцуулах утга (жишээ нь, 600px).
CSS дэх медиа асуулгын жишээ
Дараах элементүүдтэй багийн гишүүдийн дэлгэрэнгүй хуудсыг авч үзье.
- Профайлын зураг
- Нэр, гарчиг
- Намтар
- Холбогдох мэдээлэл
Зорилго нь эдгээр элементүүдийг өөр өөр дэлгэцийн хэмжээтэй тохируулдаг мэдрэмжтэй дизайн бий болгох явдал юм.
Өгөгдмөл хэв маяг (том дэлгэцийн хувьд)
{{EJS9}}Таблетад зориулсан медиа асуулга (600 пикселээс 900 пикселийн хоорондох дэлгэц)
{{EJS10}}Хөдөлгөөнт төхөөрөмжид зориулсан медиа асуулга (599 пиксел хүртэлх дэлгэц)
{{EJS11}}Жишээний тайлбар
- Өгөгдмөл хэв маяг: Эдгээр загварууд нь ширээний компьютер, зөөврийн компьютер зэрэг том дэлгэцэнд хамаарна. `Багийн гишүүн` анги нь хэвтээ чиглэлтэй flexbox зохион байгуулалтыг ашигладаг. Профайл зураг нь харьцангуй том бөгөөд дэлгэцийн боломжит зайг ашиглахын тулд текстийн хэмжээ нь бас том байна. - Таблетын загварууд: Дэлгэцийн өргөн 600 пикселээс 900 пикселийн хооронд байх үед зохион байгуулалт нь баганын чиглэл рүү өөрчлөгдөж, элементүүдийг голлуулна. Тэнцвэртэй харагдахын тулд профайлын зургийн хэмжээг багасгаж, захын зайг тохируулсан. Жижиг дэлгэцтэй таарахын тулд үсгийн хэмжээг бага зэрэг багасгасан. - Гар утасны хэв маяг: 599px хүртэлх дэлгэцийн хувьд бүдүүвч нь баганын чиглэлд хэвээр байх боловч профайл зураг болон текстийн хэмжээ улам багасдаг. Дэлгэцийн хязгаарлагдмал орон зайг илүү сайн ашиглахын тулд дэвсгэрийг мөн багасгасан.
Хэвлэл мэдээллийн асуулга ашиглах шилдэг туршлага
1. Мобайл-Анхны арга: Эхлээд хамгийн жижиг дэлгэцэнд зориулж загвар зохион бүтээж, дараа нь том дэлгэцэнд загвар нэмэхийн тулд медиа асуулга ашиглана уу. Энэ арга нь загвар нь угаасаа хариу үйлдэл үзүүлэхийг баталгаажуулдаг. 2. Харьцангуй нэгжийг ашиглах: Пиксел гэх мэт тогтмол нэгжийн оронд хувь, ems, rems зэрэг харьцангуй нэгжийг ашиглана уу. Энэ нь дизайныг илүү уян хатан болгож, янз бүрийн дэлгэцийн хэмжээтэй тохирч чаддаг. 3. Бодит төхөөрөмж дээр туршилт хийх: Таны responsive загвар нь хүлээгдэж буйгаар ажиллахын тулд бодит төхөөрөмж дээр үргэлж туршиж үзээрэй. Эмулятор болон хөтчийн хэрэгслүүд нь тустай боловч бодит төхөөрөмжүүд нь хамгийн зөв үр дүнг өгдөг. 4. Зургийг оновчтой болгох: Янз бүрийн дэлгэцийн хэмжээтэй зохицсон мэдрэмжтэй зургуудыг ашигла. `-д `srcset` болон `sizes` шинж чанарууд зэрэг техникүүд ` шошго нь төхөөрөмжид тохирох зургийн хэмжээг тохируулахад тусална. 5. Гүйцэтгэлийг анхаарч үзээрэй: Жижиг дэлгэцийн хувьд шаардлагагүй нөөцийг ачаалахаас зайлсхий. Хөдөлгөөнт төхөөрөмжийн гүйцэтгэлийг сайжруулахын тулд нөхцөлт ачаалах техникийг ашигла.
Медиа асуулгын дэвшилтэт функцууд
1. Зорилго: Та төхөөрөмжийн чиг баримжаа (хөрөг эсвэл ландшафт) дээр тулгуурлан хэв маягийг хэрэглэхийн тулд "чиг баримжаа" зөөвөрлөгчийн функцийг ашиглаж болно.
css
@media screen and (orientation: landscape) {
.team-member {
flex-direction: row;
}
}
2. асуудал харьцаа: "Аспект-харьцаа" зөөвөрлөгчийн функц нь төхөөрөмжийн өргөн ба өндрийн харьцаанд тулгуурлан хэв маягийг ашиглах боломжийг олгодог.
css
@media screen and (min-aspect-ratio: 16/9) {
.profile-picture {
width: 250px;
height: 250px;
}
}
3. тогтоол: `Resolution` медиа функцийг тодорхой дэлгэцийн нягтрал бүхий төхөөрөмжүүдэд чиглүүлэхэд ашиглаж болно.
css
@media screen and (min-resolution: 2dppx) {
.profile-picture {
border: 2px solid #000;
}
}
4. Хэвлэл мэдээллийн асуулга нэгтгэх: Та `ба`, `эсвэл`, `not` гэх мэт логик операторуудыг ашиглан олон медиа асуулга нэгтгэж болно.
css
@media screen and (max-width: 600px), screen and (orientation: portrait) {
.team-member {
flex-direction: column;
}
}
Хэвлэл мэдээллийн асуулга нь мэдрэмжтэй дизайн хийхэд зайлшгүй шаардлагатай хэрэгсэл юм. Эдгээр нь хөгжүүлэгчдэд вэб хуудасны зохион байгуулалт, хэв маягийг өөр өөр төхөөрөмжид тохируулах боломжийг олгож, хэрэглэгчийн туршлагыг тасралтгүй хангах боломжийг олгодог. Хэвлэл мэдээллийн асуулгыг ойлгож, үр дүнтэй ашигласнаар та ямар ч төхөөрөмж дээр сайн ажилладаг, гайхалтай харагдах багийн гишүүдийн дэлгэрэнгүй хуудсыг үүсгэж болно.
Сүүлийн үеийн бусад асуулт, хариулт EITC/WD/WFCE Webflow CMS ба eCommerce:
- Үйлчлүүлэгчийн саналд хандах ерөнхий хандлага нь хувь хүний хандлагаас илүү үр дүнтэй юу?
- Чөлөөт ажилтны багц нь тэдний сурч боловсрох чадвар, хүсэл эрмэлзлийг харуулахад ямар ач холбогдолтой вэ, энэ нь тэдний өөртөө итгэх итгэлийг хэрхэн бэхжүүлэх вэ?
- Портфолио нь бие даасан ажилтны аяллын гэрч болж, үйлчлүүлэгчдэд итгэл, эрх мэдлийг үр дүнтэй суулгахын тулд ямар элементүүдийг агуулсан байх ёстой вэ?
- Ижил бэрхшээлтэй тулгардаг бусад фрилансерүүдтэй холбогдох нь таны суралцах, дэмжлэг үзүүлэх сүлжээг хэрхэн сайжруулах вэ?
- Freelancing-ийн хүрээнд төгс төгөлдөрт хүрэх нь яагаад биелэх боломжгүй зорилго гэж тооцогддог вэ, алдаа, бүтэлгүйтэл нь хувь хүний болон мэргэжлийн өсөлтөд хэрхэн хувь нэмэр оруулах вэ?
- Чөлөөт ажилтны аяллын оргил үе нь шинэ бүлгийн эхлэлийг хэрхэн илэрхийлж байна вэ, тасралтгүй суралцах нь энэ үйл явцад ямар үүрэг гүйцэтгэдэг вэ?
- Webflow дээр төслийг харуулахдаа тохирох үзэгчдэд хүрэхийн тулд ямар төрлийн шошго оруулах ёстой вэ?
- Иж бүрэн багцын вэбсайт үүсгэх нь вэб хөгжүүлэлтийн салбарт итгэлцэл, эрх мэдлийг бий болгоход хэрхэн хувь нэмэр оруулдаг вэ?
- Харагдах байдлыг нэмэгдүүлэх, боломжит үйлчлүүлэгчдийг татахын тулд Webflow төслийн танилцуулгыг хуваалцах ямар үр дүнтэй стратеги байдаг вэ?
- Үйлчлүүлэгчийн оролцоонд сүүлийн үеийн төслүүдээс лавлагаа авах нь вэб хөгжүүлэгчдэд хэрхэн ашигтай вэ, нууцыг задруулахгүй байх гэрээний талаар юуг анхаарах ёстой вэ?
Бусад асуулт, хариултыг EITC/WD/WFCE Webflow CMS болон цахим худалдааны хэсгээс үзнэ үү