Мин-өргөн ба хамгийн их өргөнтэй медиа асуулгын аль алины синтакс
Хариуцлагатай вэб дизайн нь эдгээр хуудсууд зочдын дэлгэцийн хэмжээн дээр үндэслэн тэдгээрийн байршил, харагдах байдлыг динамикаар өөрчлөх боломжтой веб хуудас бүтээх арга юм. Том дэлгэцүүд нь том дэлгэцэн дээр тохирсон загварыг хүлээн авах боломжтой бөгөөд гар утас гэх мэт жижиг төхөөрөмжүүд нь жижиг дэлгэцэд тохирсон ижилхэн вэбсайтыг хүлээн авах боломжтой байдаг. Энэ арга нь бүх хэрэглэгчдэд илүү сайн хэрэглэгчийн туршлага олгодог бөгөөд энэ нь хайлтын системийг сайжруулахад туслах боломжтой юм. Хариуцлагатай вэб дизайн чухал хэсэг нь CSS Media Queries.
Media Queries нь таны вэбсайтын CSS файл доторхи бага нөхцөлт мэдэгдлүүдтэй адил юм. Энэ нь тодорхой нөхцөлийг хангасан үед тодорхой хэмжээгээр нөлөөлөх болно. Жишээ нь дэлгэцийн хэмжээ тодорхой босгоос дээгүүр эсвэл доогуур байх шиг.
Үйлдлийн Медиа Асуултууд
Тэгэхээр та вэбсайт дээрх Медиа Асуултыг хэрхэн ашигладаг вэ? Энд маш энгийн жишээ байна:
- Та ямар ч харагдах загвараас (сайн бэлтгэгдсэн CSS гэж байх ёстой) сайн бүтэцтэй HTML баримтаар эхлэх болно.
- Таны CSS файлд та хуудасны загварыг байрлуулж вэбсайтын хэрхэн харагдах талаар суурь мэдээллээр эхэлдэг. Хуудасны фонтны хэмжээ 16 пиксел байхыг хүсч байгаагаа хэлье, та энэ CSS-г бичиж болно: body {font-size: 16px; }
- Одоо та үлэмж хэмжээний үл хөдлөх хөрөнгөтэй томоохон дэлгэцэнд зориулсан үсгийн хэмжээг нэмэгдүүлэхийг хүсч болох юм. Энэ нь Media Queries өшиглөгдөх болно. Та ийм медиа хайлтыг эхлүүлэх болно: @media screen болон (min-width: 1000px) {}
- Энэ бол мэдээллийн хайлтын синтакс юм. Энэ нь Media медиа үүсгэхийн тулд @media -ээр эхэлдэг. Дараа нь та "медиа хэлбэр" гэж тохируулсан бөгөөд энэ тохиолдолд "дэлгэц" юм. Энэ нь ширээний компьютерын дэлгэц, таблет, утас зэрэгт хамаарна. Эцэст нь, та Media Query-г "медиа функц" -аар дуусгавар болгоно. Дээрх жишээн дээр "дунд өргөн: 1000px". Энэ нь Media Query нь 1000 пикселийн өргөнтэй хамгийн бага өргөнтэй дэлгэцийн товчлуур юм.
- Медиа хайлтын эдгээр элементүүдийн дараа та ямар ч хэвийн CSS дүрмэнд хийх зүйлтэй адилаар нээх, хаах холбоосыг нэмнэ.
- Хэвлэл мэдээллийн хайлтын төгсгөлийн алхам бол энэ нөхцлийг биелүүлсний дараа хэрэглэхийг хүссэн CSS дүрмийг нэмэх явдал юм. Та Media Query-ийг бүрдүүлж байгаа гоёмсог хаалтанд эдгээр CSS дүрмүүдийг дараах байдлаар нэмнэ үү: @media screen болон (min-width: 1000px) {body {font-size: 20px; }
- Хэвлэл мэдээллийн хайлтын нөхцлүүд хангагдах үед (хөтчийн цонх нь дор хаяж 1000 пиксел өргөн) энэ CSS хэв маяг нь манай вэбсайтын үсгийн хэмжээг 16 пикселээс 20 пикселийн шинэ утгын дагуу өөрчлөх боломжтой болно.
Илүү Styles нэмэх
Та энэ вэбсайтын харагдах байдлыг тохируулахын тулд энэ Media Query дотор олон CSS дүрмийг байрлуулж болно. Жишээлбэл, хэрэв та фонтын хэмжээг 20 пиксел хүртэл өсгөхийг хүсэхгүй байгаа бол бүх догол мөрийг хар (# 000000) болгож өөрчлөхийг хүсвэл дараахийг нэмж болно:
@media дэлгэц болон (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; }}Илүү олон медиа асуултуудыг нэмж оруулах
Үүнээс гадна, та илүү том хэмжээтэй Media Queries-г нэмж, том хэмжээтэй хэмжээгээр өөрийн style хуудас руу нэмж болно:
@media дэлгэц болон (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; {} @media дэлгэц ба (мин-өргөн: 1400px) {body {font-size: 24px; }}Эхний Медиа Асуулга нь 1000 пиксел өргөн өшиглөж, үсгийн хэмжээг 20 пикс болгож өөрчлөх боломжтой. Дараа нь браузер 1400 пикселээс дээш бол үсгийн хэмжээ 24 пиксел хүртэл өөрчлөгдөх болно. Та өөрийн вэбсайтдаа хэрэгцээтэй олон төрлийн Media Query нэмэх боломжтой.
Min-Width ба Max-Width
Media Queries бичих хоёр аргыг "мин-өргөн" эсвэл "өргөн-өргөн" ашиглана. Одоогийн байдлаар "минутын өргөн" үйлдлийг бид харж байна. Энэ нь хөтөч хамгийн багадаа хамгийн багадаа хүрч ирсний дараа Media Queries үйлчлэх болно. Тиймээс хөтөч дор хаяж 1000 пиксел өргөн байх үед "мин-өргөн: 1000px" гэсэн хайлтыг хэрэглэнэ. "Медиа-анхны" хэлбэрээр сайт барьж байх үедээ Media Query энэ хэв маягийг ашигладаг.
Хэрэв та "max-width" ашигладаг бол энэ нь эсрэгээр ажилладаг. Хөтөч энэ хэмжээгээр унаснаас хойш "max-width: 1000px" мэдээллийн хэвлэлийг ашиглах болно.
Хуучны Browsers талаар
Media Queries гэсэн нэг сорилт нь Internet Explorer-ийн хуучин хувилбаруудад тэдний дэмжлэг дутагдаж байгаа явдал юм. Талархууштай зүйл бол эдгээр хуучин вэбсайтууд дээр тэдгээрийг ашиглах боломжийг олгодог хуучин вэб хөтөч програмууд дахь Медиа купиудын дэмжлэгийг нөхөж болох polyfills байдаг .
Жереми Герард / 24/17 / дээр зассан