Цахим хэрэглүүрийн хэрэглээний интернет траффик өдөр бүр нэмэгдэж байна. Орчин үеийн хэрэглэгчдэд хамгийн тохиромжтой интерфэйс бүхий нөөц хэрэгтэй. Яг ижилхэн, дасан зохицох загвар нь вэб хуудсуудыг мобайл төхөөрөмжийн шинж чанарт автоматаар өөрчлөх боломжийг олгодог тул энэ хэрэгцээг хангах боломжийг олгодог.
Энэ юу вэ
Гар утсанд ээлтэй гэж нэрлэгддэг мэдрэмжтэй зохион байгуулалт нь янз бүрийн дэлгэцийн нягтралд дасан зохицож чадах вэб хуудсыг хөгжүүлэхэд чиглэсэн тодорхой үйлдлүүдийг гүйцэтгэдэг.
Хэдэн жилийн өмнө энэ талбарт ажиллаж буй хүмүүс өөр өөр цонхны шинж чанартай 'ktrnhjyys[' гаджетууд дээр нөөцийг зөв харуулахын тулд вэб хуудасны олон хувилбар үүсгэх шаардлагатай болдог. Зохион бүтээгчид 2010 он хүртэл ингэж ажилласан. Дараа нь сайтыг хэрхэн дасан зохицох тухай санаа эрс өөрчлөгдсөн. Дараа нь энэ функцийг гүйцэтгэхийн тулд тусгай програмчлалын хэл ашигласан - JavaScript.
Вэбсайтыг бүх дэлгэцэн дээр хэрхэн хариу үйлдэл үзүүлэх вэӨнөөдөр хөдөлгөөнт төхөөрөмж? Одоо байрлалыг CCS3 хүснэгт болон тусгай HTML5 хэл ашиглан хийж байна.
Яагаад танд хариу үйлдэл үзүүлэх вэб сайт хэрэгтэй байна
- Та өөр өөр дэлгэцийн нягтралтай гаджетуудыг ашиглан вэбэд нэвтрэх боломжтой. Өнөөдөр хүмүүс олон төрлийн төхөөрөмжийг ахуйн хэрэгцээ, интернет ашиглах зорилгоор ашигладаг. Мэдээжийн хэрэг, нэг сайтыг өндөр чанартайгаар үзүүлж, өөр өөр хэмжээс, дэлгэцийн нягтрал бүхий төхөөрөмж дээр сайн харагдах ёстой. Хэрэглэгчид тодорхой гаджеттай ажиллахад эвгүй санагдах ёсгүй.
- Интернэт траффик, гар утасны аппликейшн болон төхөөрөмжүүдийн түгээмэл байдал. Сүлжээнд нэвтрэх боломжтой цахим хэрэгслийн өнөөгийн эрэлт хэрэгцээ нэлээд үндэслэлтэй бөгөөд энэ баримттай маргах хүн бараг байхгүй. Ийм алдартай байдлыг үл тоомсорлож болохгүй, учир нь эдгээр хэрэглэгчид таны нийт үзэгчдийн арслангийн хувийг төлөөлж магадгүй юм. Тиймээс, хэрэв та өөрийн нөөцөд зочлох хүмүүсийн тоог ижил байлгах эсвэл нэмэгдүүлэхийг хүсч байвал тэдний хэрэгцээ, сонирхолд анхаарлаа хандуулах хэрэгтэй. Өөрөөр хэлбэл, та сайтынхаа туршлагыг аль болох тохь тухтай байлгахын тулд чадах бүхнээ хийх хэрэгтэй, эс тэгвээс таны үйлчлүүлэгчид зүгээр л өрсөлдөгчид рүүгээ очиж магадгүй.
Яаралтай тусламжийн мэдээлэл. Хэрэв таны мэргэшсэн зүйл бол мэдээ болон бусад шуурхай мэдээллээр хангах явдал бол мэдээж хэрэг хэрэглэгчдэд яаралтай хэрэгтэй байж магадгүй.тэр үед гарт утаснаас өөр юу ч байхгүй байж магадгүй. Тиймээс таны даалгавар бол түүнийг аль болох хурдан шаардлагатай мэдээллээр хангах явдал юм
Мэдрэмжтэй загвар болон гар утасны програмын харьцуулалт
Төрийн хэрэглүүрт гар утасны хувилбар ашигладаг бүх төрлийн программ болон сайтууд нь бас сайн алхам боловч хэд хэдэн сул талуудтай.
- Мобайл программ нь үйлдлийн системийн төрөлтэй тохирч байх ёстой. Үүний тулд та зөвхөн цаг хугацаа төдийгүй мөнгө зарцуулах хэрэгтэй.
- Хөтөлбөрийг татах шаардлагатай. Програмыг ашиглахын тулд мэдээж хэрэг суулгасан байх ёстой. Мэдээжийн хэрэг, хэрэглэгч үүнийг хийж чадна, гэхдээ зөвхөн түүнд байнга хэрэгтэй байгаа нөхцөлд л. Хэрэв түүнд ийм хэрэгцээ байхгүй бол тэр энэ амлалтаас татгалзах магадлалтай. Үүний үр дүнд та үзэгчдийнхээ нэлээд хэсгийг алдах болно.
Та яагаад апп-аас гарах ёстой вэ
- Хөдөлгөөний хуваарилалт. Хэрэглээний хэрэглээ нь нөөцийн ирцийн түвшинг харуулдаггүй. Өөрөөр хэлбэл, программ болон сайтын урсгалыг нэгтгээгүй бөгөөд энэ нь таны сонирхож буй үзүүлэлт буурахад хүргэдэг.
- Нөөц материалыг нэгтгэх. Хэрэв та програм худалдаж авсан бол бүх материалыг синхрончлохын тулд нэмэлт мөнгө зарцуулах эсвэл сайтыг бөглөж, контентыг програм руу шилжүүлэх шаардлагатай болно. Үүний үр дүнд та мөнгө, цаг хугацаагаа дахин алдах болно.
Хэрхэн дасан зохицох вэвэб сайт дизайн
Эхний алхам бол бүх ажлыг төлөвлөх явдал юм. Энэ явцад дизайнер харьцангуй жижиг дэлгэц, цэсийн нэг багана ашиглан мөн чанар, гол санааг чадварлаг илэрхийлэх шаардлагатай.
Шаардлагатай бол мэдээллийн блокуудыг багасгаж, зөвхөн хамгийн чухал элементүүд үлдэнэ. Эхлэгчдэд зориулсан гарын авлагад ихэвчлэн дараах зүйлс орно:
- хамгийн түрүүнд гар утас - электрон хэрэгсэлд зориулсан дизайн;
- уян зураг - уян хатан зураг ашиглах;
- сүлжээнд суурилсан бүдүүвч - сүлжээнд суурилсан уян хатан бүдүүвч ашиглах;
- медиа асуулга - медиа асуулга боловсруулж байна.
Вэбсайтыг хэрхэн хариу үйлдэл үзүүлэх вэ? Үүнийг хийхийн тулд та хэд хэдэн төрлийн бүдүүвч ашиглаж болно.
- Резин. Энэ төрлийг хэрэгжүүлэхэд хялбар, эхлэгчдэд ч хүндрэл учруулах нь ховор байдаг. Нөөцийн үндсэн блокууд нь хөдөлгөөнт дэлгэцийн хэмжээтэй таарах хүртэл шахагдана. Хэрэв шахах боломжгүй бол тэдгээрийг соронзон хальс хэлбэрээр байрлуулна.
- Блок зөөх. Энэ техник нь олон багана бүхий нөөцийн хувьд төгс ажилладаг. Нэмэлт блокуудыг байрлуулах нь дэлгэцийн хэмжээнээс хамаарч өөр өөр байдаг. Хэрэв дэлгэц багасвал хажуугийн самбарууд доод тал руу шилжинэ.
- Бүдүүвчийг сэлгэх. Энэ бол дэлгэцийн нягтрал бүрт тусгайлан бүтээсэн схемийг ашиглахтай холбоотой нэлээд цаг хугацаа шаардсан техник юм. Энэ арга нь сайтын судалгааг ихээхэн хөнгөвчлөх боловч ажлын нарийн төвөгтэй байдал нь түүнийг нэхэмжлэх боломжгүй болгодог.
- Анхан шатны зохион байгуулалт. Арга зүй, өө сэвгүйэнгийн нөөцөд тохиромжтой. Дизайнер зүгээр л зураг, хэвлэмэл хэлбэрийг томруулдаг. Хэдийгээр уян хатан чанаргүй тул энэ аргыг эрэлт хэрэгцээтэй гэж нэрлэх боломжгүй.
- Хамбарууд. Энэ техник нь дэлгэцийн аль ч байрлалд туслах цэс гарч ирэх боломжтой гар утасны програмуудаас гаралтай. Сайт дээрх гар утасны навигаци нь хэрэглэгчдэд үргэлж ойлгомжтой байдаггүй тул одоо энэ арга нь тийм ч түгээмэл биш юм.
Тайлсан бүдүүвчүүдийн аль нь ч бүх нийтийн гэж нэрлэгдэх боломжгүй. Вэбсайтыг хэрхэн хариу үйлдэл үзүүлэх вэ? Юуны өмнө та төслөөс хамааран тохиромжтой байршлыг сонгох хэрэгтэй. Энэ нь нөөцийн чадавхид бүрэн нийцэж, бүх хэрэгцээг хангах ёстой.
Вэбсайтыг хэрхэн хариу үйлдэл үзүүлэх вэ
Өнөөдөр CSS3 болон HTML5-ийг үүнд ашиглаж байна. Эхний технологи нь шаталсан хүснэгтүүдийн дэвшилтэт үе юм. Үүний тусламжтайгаар сайтын дэлгэрэнгүй мэдээллийг хэрэглэгчийн дэлгэц дээр харуулах дүрмийг боловсруулдаг.
CSS3-ийн тусламжтайгаар та хэд хэдэн параметрийг тохируулж болно: эзэлсэн зайны хувь болон тодорхой нарийвчлалтай элементийн хэмжээс. Энэхүү технологийн тусламжтайгаар дизайнерууд тодорхой шинж чанаруудад тохирсон өөр өөр ангиудыг бий болгож чадна.
HTML5 нь тодорхой мэдээллийн байршлыг зааж өгөх, өөрөөр хэлбэл хуудсыг тэмдэглэхэд хэрэглэгддэг. Үүсгэсэн CSS3 ангиудыг HTML шошгонд зааж өгсөн тул ашигласан объектуудыг нягтралаас хамааран өөрчлөх боломжтой.
Тэгвэл html ашиглан хэрхэн хариу үйлдэл үзүүлэх вэб сайт дизайн хийх вэ? Та энгийн зургийг боловсруулж эхлэх хэрэгтэйдараа нь сунга.
Энэ нь зураг боловсруулах бүрхүүл үүсгэдэг.
Вэбсайтыг CSS-ээр хэрхэн хариу үйлдэл үзүүлэх вэ? Дараах параметрүүдийг тохируулна уу:
див {
өргөн: 100%;
}
div зураг {
өргөн: 100%;
өндөр: автомат;
}
Дараа нь div-ийн өргөнөөр img зургийн өргөнийг тохируулна уу.
Тиймээс та ямар ч нарийвчлалтайгаар дэлгэцийн зайг бүхэлд нь эзлэх зураг авах болно.
Хувийн зүйлсийг өөрчлөх
Сайтын толгой хэсэг. Толгой хэсэгт хэд хэдэн элемент байрлуул:
лого -
цэсийг нуух товчлуур -
үндсэн цэс -
сайт хайлт -
- Текст контентоор блоклох. Элементийг ашиглан нийтлэлийг боох.
- Хажуугийн багана. Ангиллын жагсаалтыг олохын тулд ашиглана уу, захидлын жагсаалт болон сүүлийн нийтлэлүүд рүү дарна уу.
- Вэбсайтад дасан зохицох цэсийг хэрхэн хийх вэ? Тэмдэглэгээнд элемент нэмнэ үү. Энэ код нь цэсийн өндрийг өөрчилдөг бөгөөд агуулгыг шаардлагатай хэмжээсүүдэд тохируулна.
Ми-галерей үүсгэх
Хэрхэн мэдрэмжтэй html болон css вэб сайт хийхийг мэддэг тул та өөрийн нөөцийг ямар ч хэрэглүүрт тохирох хэрэгтэй, сонирхолтой контентоор дүүргэх боломжтой, жишээ нь мини галерей.
HTML-д хэд хэдэн зураг нэмэхийн тулд дараах элементүүдийг ашиглана уу:
Зураг бүр өөр өөр нягтаршилтай ажиллаж, хэмжээгээ өөрчлөхийн тулд CSS3: ашиглана уу.
div.зургийн_галерей {
маржин: 0 автомат;
өргөн: 1000px;
мин-өргөн: 500px;
}
img {
хамгийн их өргөн: 48%;
дөмөг: 1%; / зураг дээр бага зэрэг дэвсгэр /
}
Бодлоо, таны мини галерей бэлэн боллоо. Одоо та вэбсайтаа янз бүрийн төхөөрөмжид хэрхэн хариу үйлдэл үзүүлэхээ мэддэг болсон.
Ажлын чанарыг хэрхэн шалгах вэ
- Google Chrome. Хөтөч рүү орсны дараа F12 товчийг дарна уу. Үүний дараа самбар нээгдэх болно - жишээлбэл, таблет эсвэл ухаалаг утас гэх мэт сонирхож буй гаджетынхаа дүрс дээр дарна уу. Дараагийн цэснээс шаардлагатай нягтралыг сонгоно уу.
- Төхөөрөмжийн хариу үйлдэл. IFrame-ээр дамжуулан сайтыг ачаалах замаар дасан зохицох байршлыг шалгах боломжтой програм. Тэнд та өөр өөр нарийвчлалтай төхөөрөмжүүдийн жагсаалтыг харах болно.
- Aresponsivedesign.is. Энэ бол зугаа цэнгэлийн эх сурвалж юм. Эхлээд сайтыг IFrame цонхонд ачаалж, дараа нь Apple-ийн дэлгэц рүү шилжүүлнэ. Энэ нь дэлгэцийн дэлгэцийн агшинг авахад маш тохиромжтой.
