CSS Хэвлэл мэдээллийн Асуулгын: алхам тодорхойлолт, онцлог, хянан алхмаар

Эрт нэгэн цагт, вэб сайтуудад зочилж, хүмүүст ухаалаг гар утас болон бусад зөвхөн инээж хүргэж ижил төстэй хөдөлгөөнт төхөөрөмжүүд юм. Олон зүгээр л ийм тав тухтай ширээний компьютер байгаа тул энэ чухал юм яагаад ойлгохгүй байгаа юм! Эсвэл үед хамгийн муу, Зөөврийн компьютер. Үүнээс гадна, гар утасны интернэт дараа нь үнэтэй байсан юм.

Цаг хугацаа өнгөрөв. Интернэт хямд болсон байна. Худалдах илүү их, илүү гар утас болон шахмал гарч ирэв. Хэсэг хугацааны дараа, алдартай сайтуудын эзэд түүний толгойг зураас гайхсан. статистик мэдээгээр, энэ нь тэдний нөөц нь суурин компьютер нь илүү тэдний ухаалаг гар утас очих магадлал их байдаг гэж гарсан!

Тэр үед газар хөдөлгөөнт төхөөрөмжүүдийн дээр үзэх оновчтой чадаагүй байна. Таны утсан дээр хуучин амьдрал гэж та жижиг үсгээр, жижиг цэс эд зүйл, эвгүй товч агуулга байх ёстой байсан.

CSS Хэвлэл мэдээллийн асуулга нь Угтах

ямар ч дэлгэцнээс үзэх үед тэд сайн харагдах тул нөөцийг ногдуулах шаардлага байсан. Эхлээд хэмжээ тус бүрээр тус тусад нь газрыг байгуулах дадлага тархсан. Жишээ нь гар утас хэрэглэдэг жуулчид, та нэг эх үүсвэр, таны компьютерт "сууж" байгаа нь нэг талаар авах - бусад байна. Гэхдээ энэ нь урт удаан үнэтэй, эвгүй байсан.

Дараа нь CSS3 Хэвлэл мэдээллийн асуулт ирсэн юм. Тэдний хамт динамик загварыг хэрэгжүүлэх зөвхөн боломжийг ирсэн юм.

динамик загвар гэж юу вэ?

нөөцийн харагдах дэлгэц нь үзэж байгаа аль хэмжээний дагуу өөрчлөгддөг бол энэ нэр томъёо хэрэглэж байна. Үүнийг хэрхэн ойлгох вэ? Энэ нь энгийн юм.

Хэрэв та вэб сайт байна гэж төсөөлөөд үз дээ. түүний дээд хэсэгт нь навигацийн цэс байдаг. Хэвтээ. Энэ хуудасны нийт өргөний гаруй үргэлжилдэг. Доорх холбоо барих мэдээлэл блок юм. Телефон утас, хаяг нь бас хоёр блок аас зайтай, хэвтээ өөр хоорондоо зэргэлдээ зохион байгуулсан байна. Энэ блок дагуу - үндсэн агуулга, зүүн буюу баруун тийш Sidebar юм байна. Доорх, ердийн хөлийн байна.

Энэ нь "сонгодог" зохион диаграмм. Энэ нь хувийн компьютерийн хувьд төгс ч, гар утас ч тохиромжтой биш юм. Хэвтээ цэс хэтэрхий өргөн байна. Холбоо барих бие биеэсээ хол байрладаг. талд байгаа мэдээллийг ашиглан бүх дэлгэцийг гүйлгэж байх болно, мөн энэ нь хүн бүрийн амт нь биш юм.

асуудал CSS3 Хэвлэл мэдээллийн асуулга бүхий дасан зохицох болон гар утасны загварыг ашиглан шийдвэрлэж болно. хэвлэл мэдээллийн асуулга ашиглан бид агуулга, байршлыг шинэчлэх Одоо энэ мэт ажилладаг ...:

• ТОР - босоо навигацийн цэс нэгж;
• Хэрэв доор - харилцах, одоо бас босоо байрлуулсан байгаа нь блок,
• Sidebar агуулга <гол> хаяг агуулгын талд гарч ирэхгүй бөгөөд түүний дээр.

Энэ Хариуцлагатай Вэб дизайн Хэвлэл мэдээллийн асуулга нь юу хийж болох энгийн жишээ юм. Ер нь бол их боломж.

Тэгэхээр хэвлэл мэдээллийн асуулт юу вэ?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. CSS дагуу хэвлэл мэдээллийн Асуулгын CSS3 цаг модуль бол та аль нь хуудасны агуулга нь тодорхой нөхцөл байдалд дасан зохицох хийх боломжтой ойлгож байна. Жишээ нь, энэ нь дэлгэцийн хэмжээ, чиг баримжаа олгох төхөөрөмж (хөрөг / газар нутаг) хариу эхэлдэг.

систем нь шаардлага агуулгыг өөрчлөх гэж ойлгодог уу? Энэ нь хэвлэл мэдээллийн асуулга ашигладаг. Тэд зарим нэг параметрүүдийг зааж өгөх хэрэгтэй. нь зочин сайтад ирсэн ямар нэгэн төхөөрөмж эдгээр параметрүүдийг, урьдчилан хөөн хэлэлцэх хугацаа хэв маяг гэх мэт үгийн утганд яг тохирч байвал. Тэд нийт CSS хүснэгт бичсэн, эсвэл тусдаа файл байж болно.

CSS Хэвлэл мэдээллийн Асуулгын Хөтөч Compatibility

Safari до Chrome. Орчин үеийн мэдээлэл хөтөч Safari-аас Chrome тулд энэ технологийг дэмждэг. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Мэдээж хэрэг, хэрэглэгч-ийн хуучин хувилбарууд нь Internet Explorer байгаагүй асуудал ... гэхдээ байг царай нь чин сэтгэлээсээ - тэд хэн ч ашиглаж байгаа хуучин The IE, зүгээр л тухай юу ч лааз шалтгаан нь асуудал.

Syntax дасан зохицох байршил Хэвлэл мэдээлэл Асуулгын

html. Магадгүй та HTML нь хэв маяг нь файлыг холбогдсон үед хэвлэл мэдээллийн асуулгуудад ил байна. гэсэн мөрийг санаж байна уу? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. <Холбоос холбоо = 'загварчлах "төрөл =' текст / CSS" href = HTTP: // сайт /article/320575/%E2%80%99style.css%E2%80%99%3E Заримдаа эцэст өөр нэг параметр нэмдэг, гэж харж байгаа: хэвлэл мэдээллийн = 'дэлгэц ".

Энэ нь хэвлэл мэдээллийн хайлтын байна! Тэр заасан загварын файл телевиз тоноглогдсон төхөөрөмжүүд дээр ажиллах болно гэдгийг харуулж байна. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. Харин үүний оронд та хэвлэж зааж өгч болно - энэ тохиолдолд, файлыг загвар хуудас хэвлэсэн бол, хэрэглэж байна.

Та дараах шинж чанаруудыг ашиглаж болно:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; бүх - түгээмэл хувилбар, чимээгүй хэрэглэсэн бүх тохиолдолд хэрэглэж байна;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - дэлгэц (компьютер, зөөврийн компьютер, шахмал, гар утаснууд, бүх гэсэн дэлгэц тоноглогдсон байна);
• принтеры; хэвлэх - хэвлэгчид;
• – проекторы; төсөөлөл - проектор;
• – речевые браузеры; яриа - яриа хөтөч;
• – для устройств для слабовидящих; брайль - харааны бэрхшээлтэй зориулсан тоног төхөөрөмж;
• – для экранов телевизоров. тв - ТВ дэлгэц юм.

Энэ бүгдийг нь биш юм. , но они используются редко. хэд хэдэн нэмэлт CSS Хэвлэл мэдээллийн Асуулгын шинж чанаруудыг байдаг, гэхдээ тэдгээр нь ховор ашигладаг. all. Үүнээс гадна, та параметрийг зааж өгөхгүй - бүх талаар анхдагч байдаг.

хэвлэл мэдээллийн асуулгуудад бүтэц

css. Харин үүний оронд нь хэв маяг нь файл үүсгэх, та CSS кодыг ашиглаж болно. Энэ нь иймэрхүү харагдах болно:

(тут будут стили } @media дэлгэц, (MAX-өргөн: 1024px) {( хэв маяг байдаг}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. болон нэмэлт параметрүүдийн - @media удирдамж, хэвлэл мэдээллийн хайлтын ашиглаж байгаа нь тодорхой гэж болгодог дараа төхөөрөмж (дэлгэц) төрлийн шинж тэмдэг байгаа. Max Width. Энэ жишээн дээр, CSS Хэвлэл мэдээллийн Асуулгын Макс өргөн эд хөрөнгийг ашиглаж байна. px. Энэ нь хаалтанд-д заасан загвар оролцож болно гэсэн үг юм бол 1024 PX илүү төхөөрөмжийн дэлгэц хэмжээ хэрэглэгч. и and не обязательны. Дэлгэц ба мөн заавал биш. Та энэ бичиж болно:

@media (MAX-өргөн: 1024px) {}

Биш, зүгээр л телевизор тоноглогдсон байна гэж тэд ийм тохиолдолд шинж чанар нь ямар ч төхөөрөмж дээр ашиглаж болно.

олон параметрүүдийг тодорхойлох

Та хэв маягийг сонгох ашиглаж болно хэд хэдэн төхөөрөмжүүдийн хүрээг хязгаарлахыг хүсч байна гэж бодъё. px, но не больше 500 px. нь та зөвхөн ухаалаг гар утас нь таны сайтад зочлох хүмүүсийн шинж чанарыг харуулахыг хүсэж байна гэж үзье, дэлгэцийн хэмжээ 320-аас бага PX, гэхдээ ямар ч 500 гаруй PX биш юм. Ийм тохиолдолд хүсэлт хэлбэрийг авдаг:

@media (мин өргөнтэй: 320px) ба (MAX-өргөн: 500px) {}

and. Та програмчлалын мэддэг бол та оператор хэрэглэж, юу мэдэж NJ. мэдэхгүй байгаа хүмүүсийн хувьд: Энэ нь аль аль нь нөхцөл үнэн бол шалгадаг. хайлт дэлгэцэд E. идэвхжүүлэх шинж чанар нь 500 гаруй цэгээр 320-ээс доошгүй, харин байх ёстой.

and не ограничивается одним. Тэгээд операторуудын тоо нэг нь хязгаарлагдмал байна. Та тэднийг их та хүсвэл тавьж болно. Телевизор нь - Жишээ нь, ухаалаг гар утас, огт өөр нь тодорхой хэмжээтэй дэлгэцүүд бий болгох гэж оролддог.

Нэг чухал цэг - хэрэглэгчийн төхөөрөмжийн чиг баримжаа олгох. газар нь - хөрөг чиг баримжаа нь таны гар утсан, хэн нэгэн дээр вэбсайтыг үзэж Хэн нэгэн. orientation:portrait, для вторых, соответственно, orientation:landscape. , Хоёр дахь тус тус чиг баримжаа нь хөргийг: газар нутгийг асан, та нэмэлт нөхцөл чиг баримжаа хэрэгтэй болно. @media. Эдгээр мөрүүд нь бас @media баг дараах хаалтанд харуулав. and. Та дамжуулан тэднийг хуваалцаж чадна.

Өөр нэг сонирхолтой нь нэлээд. and вы вполне можете использовать оператор or. Харин үүний оронд, та сайн, эсвэл оператор ашиглаж болно. Тэр нь үнэн байх хүсэлтэд дор хаяж нэг нөхцөл хэрэгтэй! Жишээ нь:

) {} @media (MAX-өргөн: 500px) эсвэл (чиг баримжаа: хөрөг) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. дэлгэц нь 500-аас бага PX буюу ашиглах хөрөг чиг баримжаа олгох юм бол, хаалтанд нөлөө хэв маягийг авч болно.

нарийн тааруулах төлөө бус Түлхүүр үг

not. хэвлэл мэдээллийн хайлтын, та нарын үгийг оруулж болно. дараах байдлаар үүнийг хийж болно:

@media (гэхдээ MAX-өргөн: 700px ) {}

хамгийн их өргөн 700 пиксел тэнцүү биш бол Үл хөдлөх хөрөнгө идэвхжүүлсэн байна.

хэвлэл мэдээллийн хэрэгсэл онцлог

зүйлүүдийг хэд хэдэн урьдчилан тогтоосон чиг үүргийг ашиглаж болно. W3C. Бүх Та онлайн W3C болно танилц. хангалттай ихэнх нь хамрагдсан гол гурван эзэмших:

• (о нем мы уже говорили); чиг баримжаа олгох (бид аль хэдийн энэ тухай ярьж);
• (ширина, ее тоже упоминали); өргөн нь (өргөн нь, энэ нь бас дурдсан байна);
• (высота). өндөр (өндөр).

Өндөр ховор хэрэглэгддэг боловч тухайн Энэ тохиргоо нь ашигтай байж болох хэд хэдэн тохиолдол байдаг.

Хэрхэн, хаана хүсэлтийг байрлуулах вэ?

Олон вэб дизайнерууд ямар нэгэн файл хэв маяг нь тэднийг эцэст нь хүртэл тавьсан. Жишээ нь эхний гол арга барилтай жагсаасан, дараа нь, баримт бичгийн ёроолд, хүсэлт тавьжээ.

Энэ бол маш сайн зүйл биш юм. Ихэнх нь илүү тохиромжтой үндсэн хэв маяг дараа баруун өөр өөр төхөөрөмжүүд нь шинж байрлуулах. Жишээ нь, та DIV улаан, үсгийн өнгө тогтоосон байна:

DIV {

өнгө: улаан,

}

Нэн даруй хүсэлт харуулж дараа:

@media (мин өргөнтэй: 320px) {}

шинж чанарыг тодорхойлно.

Та цэвэр »CSS ашиглаж байгаа бол" Ийм арга нь төвөгтэй байж болох юм. кодоос машин кодод тусламжтайгаар хэрэгтэй. Тэд илүү нарийвчлалтай програм хүсэлтийг сонирхолтой боломж маш их байна.

Өөр нэг сонголт - өөр өөр хэв маяг нь файлууд янз бүрийн төхөөрөмжүүдийг шинж байрлуулах. Та импортлох нь процессор захирамж ашигладаг бол энэ нь ялангуяа ашигтай байдаг. үр дүн засах нь хялбар, цэвэр код байна.

Аль нэг нь ашиглах вэ? Энэ бүх хувийн давуу болон багийн шинж чанараас шалтгаална. Магадгүй, таны ажил оронд хэвлэл мэдээллийн асуулга тавьж хүлээн авахгүй нь тодорхой арга зам байдаг.

Мөн та хамгийн сүүлийн үеийн программ хангамж нь таны амьдралыг хялбаршуулах болно гэдгийг мартаж болохгүй. Энэ бол зүгээр л эх кодоос машин кодод тухай биш юм. Gulp групп CSS Хэвлэл мэдээллийн асуулга нь үйл явц илүү хялбар болгох болно. Энэ хэрэгсэл нь буюу түүний analogs ямар ч эзэн нь санал болгож буй.