Вэбсайтад тохируулсан зохион байгуулалт

Агуулгын хүснэгт:

Вэбсайтад тохируулсан зохион байгуулалт
Вэбсайтад тохируулсан зохион байгуулалт
Anonim

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

Орчин үеийн чиг хандлага

Дасан зохицох зохион байгуулалт
Дасан зохицох зохион байгуулалт

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

Хариуцлагатай бүдүүвчийн тодорхойлолт

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

дасан зохицох нарийвчлалын зохион байгуулалт
дасан зохицох нарийвчлалын зохион байгуулалт

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

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

Responsive Layout-ын давуу тал

Вэбсайтыг дасан зохицох давуу тал нь юу вэ? Аливаа төхөөрөмж дээрх бүх хуудасны блокуудыг зөв харуулах нь давуу тал гэдгийг өмнө нь тэмдэглэсэн. Мөн загвар бүтээхэд энэ аргын эерэг тал бол өөрчлөлтийг хэрэгжүүлэх хурд юм. Энэ юу гэсэн үг вэ?

мэдрэмжтэй байршлын загвар
мэдрэмжтэй байршлын загвар

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

Энэ аргын сул тал бол зарим вэбмастерууд түүнийг хэрэгжүүлэх нарийн төвөгтэй байдал гэж нэрлэдэг. Гэвч CSS 3 гарч ирснээр хариу үйлдэл үзүүлэх загвар зохион бүтээх нь маш энгийн болсон. Туршлагагүй вэбмастерууд хүртэл сайтаа гар утсанд ээлтэй болгож чадна.

Дасан зохицох зохион байгуулалтын зарчим, онцлогууд

Вэб дизайн дахь responsive layout аргын үндэс нь ямар зарчим байдаг вэ?

- Шингэн бүдүүвчийн төрлийг ашиглах.

- "Резин" зургууд.

- Медиа асуулга (медиа асуулга) ашиглаж байна.

- Байршлын эхнээс гар утасны төхөөрөмжийн талаар бодох хэрэгцээ.

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

1. Гар утаснаас өргөн дэлгэц хүртэл бүх төрлийн нягтралын ажлыг харгалзан вэбсайтын дизайныг зохион бүтээх, бүтээх.

2. CSS 3-д нэвтрүүлсэн медиа асуулгын технологийг ашиглан шаталсан загварын хүснэгт бүхий зохион байгуулалт.

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

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

Мэдрэмжтэй зохион байгуулалтыг хаанаас эхлэх вэ?

Ихэнх вэб сайтууд ухаалаг гар утас, таблетуудын дэлгэцэн дээр гүйлгэх самбар гарч ирэх байдлаар хийгдсэн байдаг нь серфинг хийхэд тийм ч тохиромжтой биш бөгөөд олон интернет төслийн дизайн, зохион байгуулалт нь зүгээр л "хөвдөг". Вэб дизайныг заахад зориулагдсан вэб сайтууд нь янз бүрийн төхөөрөмжийн дэлгэцийн янз бүрийн нягтралыг агуулж байдаг бөгөөд үүний дагуу таны сайтын хуудсуудыг байрлуулах нь зүйтэй.

дасан зохицох байршлын жишээ
дасан зохицох байршлын жишээ

Жишээ нь байнга олддог дасан зохицох загвар нь маш олон давуу талтай. Хуудасны зохион байгуулалтад ийм байдлаар хандахдаа юуг анхаарах ёстой вэ?

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

Хэдийгээр ийм мэдрэмжтэй зохион байгуулалтын технологи нь тийм ч энгийн биш ч үүнийг эзэмшсэнээр тун удахгүй үр дүнгээ өгөх болно.

Зөвлөмж болгож буй: