Вэбсайтаа зохион бүтээхдээ дэлгэцийн хэмжээ, хэлбэрээс үл хамааран ямар ч төхөөрөмж дээр гайхалтай харагдаж байгаа эсэхийг шалгах нь чухал юм. Хариуцлагатай вэбсайтууд нь компьютер, утас, таблет, зурагт, элэгддэг төхөөрөмж, тэр ч байтугай машины дэлгэц гэх мэт орчин үеийн бүх төрлийн төхөөрөмж дээр сайн харагдахаар бүтээгдсэн. Вэбсайтыг хариу үйлдэл үзүүлэхийн тулд та тодорхой нөхцөл байдлаас шалтгаалан CSS болон HTML кодоо өөрчлөх шаардлагатай. Энэхүү wikiHow нь танд хариу өгөх үндсэн вэб дизайныг хэрхэн төлөвлөх, хэрэгжүүлэх талаар заадаг.
Алхам
3 -ийн 1 -р арга: Хариуцлагатай дизайн төлөвлөх
Алхам 1. Танай вэбсайтыг үзэгчид хэрхэн ашиглаж байгааг олж мэдэх
Өнөө үед вэб үзэж буй хүмүүсийн ихэнх нь үүнийг гар утас, таблет ашиглан хийдэг. Сайтыг хариу үйлдэл үзүүлэхийн тулд та хаанаас харж байгаагаас үл хамааран зөв харуулах ёстой. Хэрэв цаг хугацаа, мөнгө хамгийн чухал бол хэрэглэгчиддээ хамгийн түгээмэл хэрэглэгддэг төхөөрөмжүүдийн төрөл (хэрэв энэ мэдээлэл байгаа бол), тэд таны сайтыг хэрхэн ашигладагт анхаарлаа хандуулаарай. Аналитик програм хангамж эсвэл өөр хэлбэрийн судалгааг ашиглан дараахь зүйлийг олж мэдээрэй.
- Вэбсайтыг үзэхийн тулд тэд ихэвчлэн ямар төрлийн төхөөрөмж ашигладаг бөгөөд гар утас/таблет/компьютерийн брэнд, дэлгэц/нарийвчлалын хэмжээг онцгой анхаарч үздэг.
- Таны хэрэглэгчдийн дунд хамгийн алдартай хөтөчүүд. Дэлхийн статистикийн хувьд Google Chrome бол дэлхийн хамгийн алдартай вэб хөтөч боловч Safari нь ойролцоогоор хоёр дахь нь юм.
- Таны зочлогсод таны вэбсайтыг хэрхэн ашиглаж байгаа, тухайлбал түүнийг үзэхэд хэр их цаг зарцуулж байгаа, хаана үзэж байгаа, ямар контент хамгийн алдартай болох зэрэг. Энэ нь ямар төрлийн агуулга оруулах нь чухал болохыг, аль нь орхигдож болохыг тодорхойлоход тусална.
Алхам 2. Өөр өөр төхөөрөмжүүдийн өөр өөр загвар зохион бүтээх
Та CSS болон JavaScript -ийн хослолыг ашиглан хэрэглэгчийн төхөөрөмж, түүний чадварыг (Java, Flash гэх мэтийг дэмждэг эсэх) илрүүлж, сайтынхаа тодорхой хувилбарыг харуулах боломжтой. CSS Media Queries нь төхөөрөмжийн хэмжээ/нягтралыг тодорхойлоход онцгой ач холбогдолтой юм.
Алхам 3. Янз бүрийн төрлийн харилцан үйлчлэлийг бүртгэх
Таны зочин харааны бэрхшээлтэй хүмүүст хулгана, гар, мэдрэгчтэй дэлгэц, бүр дэлгэц уншигч ашиглан вэбсайттайгаа харилцаж болно. Үүнийг анхаарч үзвэл таны вэбсайт хулганы товчлуур, гарын товчлуурууд (Tab, Enter, Return гэх мэт) болон дэлгэцийн хуруугаараа хүрэхэд хариу өгөх ёстой.
Хүрэх нөлөө нь хулганаас бусад зүйлтэй ажиллахгүй. Эдгээр эффектийг ашиглахын оронд та зочин хулганаа хулганаар дүрсэлж харуулсан зүйлийг харуулахын тулд товчлуур эсвэл дүрс дээр дарахыг шаарддаг
Алхам 4. Агуулгын удирдлагын систем (CMS) ашиглах талаар бодож үзээрэй
Таны сайтын дизайн хариу өгөх чадвартай байх хялбар арга бол урьдчилан бүтээсэн хариу өгөх сэдэв бүхий CMS ашиглах явдал юм. Joomla, Drupal эсвэл Wordpress гэх мэт CMS -ийг ашиглах нь танд хариу өгөх элементүүдийг кодлохгүйгээр вэбсайтаа бүх төхөөрөмж дээр гайхалтай харагдуулах боломжийг олгодог. Танай үйлчилгээнд ямар CMS хэрэгслүүд байгааг харахын тулд вэб хостинг үйлчилгээ үзүүлэгчтэйгээ холбоо бариарай.
Алхам 5. Вэбсайтаа туршихын тулд онлайн хэрэгслийг ашиглана уу
Хариуцлагатай вэб дизайн улам бүр түгээмэл болж байгаа тул вэбсайтаа туршихад ашиглаж болох олон төрлийн үнэгүй хэрэгслүүд байдаг. Хэрэв та вэбсайтаа аль хэдийн кодчилсон бол эдгээр хэрэгслүүдийг ашиглан янз бүрийн нөхцөлд хэрхэн харагдахыг туршиж үзээрэй.
- Google-ээс гар утсанд ээлтэй тест: Таны сайт компьютерын дэлгэцэн дээрх шиг хөдөлгөөнт төхөөрөмж дээр сайн ажилладаг эсэхийг мэдэх боломжийг танд олгоно.
- resizeMyBrowser: Таны сайтыг өөр өөр нарийвчлалтайгаар харах боломжийг танд олгоно.
- Хариуцагч: Таны сайтыг өөр өөр дэлгэц дээр өөр өөр байрлалд (хажуу тийш эсвэл баруун талаас дээш) харуулна.
3 -ийн 2 -р арга: Хуудасны байршлыг хариу үйлдэлтэй болгох
Алхам 1. Чөлөөт загварын хэв маягийн хүснэгтийн хүрээг авч үзье
Хүрээ бол HTML, CSS ба JavaScript-ийн урьдчилан бичсэн багц бөгөөд та үүнийг сайтынхаа араг яс болгон ашиглаж болно. Frameworks нь бүх хөтчүүдтэй ажиллахаар туршигдаж, оновчтой болсон тул танд контент оруулах, медиа, өнгөний сонголтоо нэмж, сайтаа нийтлэхэд л хангалттай. Зарим алдартай хүрээ нь:
- Bootstrap
- Араг яс
- Сан
Алхам 2. Харагдах цэгийг мета тэмдэгээр тохируулна уу
Хэрэв та хүрээ ашиглаагүй байгаа бол хариу өгөх вэбсайтыг кодлох хамгийн чухал талаас нь харахыг хүсч байна: Viewport. Харах хэсэг нь вэбсайтын хэрэглэгчдэд харагдах хэсэг юм. Дэлгэцийн хэмжээнээс үл хамааран сайтаа зөв харуулах гол түлхүүр нь META шошгон дээрх харах хэсгийн хэмжээг хуваарилах явдал юм. Үүнийг хийхийн тулд энэ хаягийг сайт дээрх хуудас бүрийн дээд хэсэгт оруулна уу.
Алхам 3. Үзэх талбартай холбоотой текстийн хэмжээг зааж өгнө үү
Таны харах цонхыг тохируулсны дараа таны хуудсан дээрх текстийг дэлгэцэн дээр тааруулах болно. Гэсэн хэдий ч фонтыг харах талбартай холбоогүй бол фонтууд хэт том эсвэл хэт жижиг харагдаж болно. Та vw нэгжийн тусламжтайгаар харах цонхны тодорхой хувийг фонтын хэмжээг тодорхойлж үүнийг хийж болно. Энэ жишээ нь H1 толгойнуудыг хэмжээ харгалзахгүйгээр харах талбайн өргөний 10% -д харуулахыг хэлнэ.
wikiHow
Алхам 4. Янз бүрийн дэлгэцийн хэмжээтэй өөр өөр хэв маягийг харуулахын тулд медиа асуулга ашиглана уу
Хэвлэл мэдээллийн асуулга нь дэлгэцийн хэмжээнээс хамааран CSS -ийн зарим элементүүдийг харуулах эсэхийг сонгох боломжийг танд олгоно. Та CSS файл дээрээ медиа асуулгынхаа онцлогийг зааж өгч болно. Энэ жишээнд хэрэглэгчийн дэлгэцийн хэмжээ 480 пиксел ба түүнээс дээш байвал биеийн арын өнгө улаан болж хувирна.
wikiHow
@медиа дэлгэц ба (мин өргөн: 480px) {бие {дэвсгэр өнгө: aqua; }}
3 -ийн 3 -р арга: Зургийг мэдрэмжтэй болгох
Алхам 1. Зургийг масштаблахын тулд CSS width шинж чанарыг ашиглана уу
Зургийн өргөнийг тодорхой хэмжээний пикселээр (жишээлбэл, 500 пиксел) тохируулахын оронд хувь хэмжээг (жишээ нь, 100%) ашиглаарай. Зургийн өргөнийг 100% болгож тохируулах нь үзэгчийн дэлгэцийн хэмжээнээс хамаарч зургийг дээш, доош масштабтай болгоход хүргэдэг. Үүнийг дарааллаар хийхийн тулд:
Алхам 2. Зургийн бодит хэмжээг масштабаар хязгаарлахын тулд max-width шинж чанарыг ашиглана уу
Хэрэв та өмнөх алхамдаа өргөн шинж чанарыг ашиглан зургийг 100% болгон масштаблах юм бол хэмжээ нь хамаагүй савныхаа 100 хувь багтахаар зураг томрох эсвэл багасах болно. Энэ нь хэрэв зураг жижиг талдаа байвал анхны хэмжээнээсээ томруулж, чанар муутай болно гэсэн үг юм. Үүнээс урьдчилан сэргийлэхийн тулд max-width ашиглан зургийн масштабын хэмжээг 100% (бодит хэмжээ) болгоно. Энд хэрхэн:
Алхам 3. Өөр өөр хэмжээтэй дэлгэц дээр өөр өөр дүрсийг харуулахын тулд HTML зургийн элементийг ашиглана уу
Хэрэв та өөр өөр хэмжээтэй дэлгэц дээр харуулахын тулд өөрчлөн тохируулсан хэмжээтэй зураг үүсгэхийг хүсч байвал ямар зургийг HTML код дээрээ харуулахыг зааж өгч болно. Өөр өөр хэмжээтэй дүрс үүсгэж, дараа нь 600px ба 1500px өргөнтэй дэлгэц дээр аль зургийг ашиглахыг тодорхойлохын тулд энэ кодыг жишээ болгон ашиглаарай.
