Veb -saytni loyihalashda, uning o'lchamlari va shaklidan qat'i nazar, har qanday qurilmada ajoyib ko'rinishini ta'minlash muhim. Javob beradigan veb -saytlar kompyuterlar, telefonlar, planshetlar, televizorlar, taqiladigan kiyimlar va hatto mashina ekranlari kabi har xil zamonaviy qurilmalarda yaxshi ko'rinishga mo'ljallangan. Veb -saytga javob berish uchun siz CSS -ni va HTML -kodingizni ma'lum shartlarga qarab uning elementlarini avtomatik ravishda o'zgartirish uchun o'zgartirishingiz kerak bo'ladi. Bu wikiHow sizga qanday javob beradigan veb -dizaynni rejalashtirish va amalga oshirishni o'rgatadi.
Qadamlar
3 -usul 1: sezgir dizaynni rejalashtirish
Qadam 1. Tomoshabinlaringiz veb -saytingizni qanday ishlatishini bilib oling
Hozirgi kunda Internetda ko'pchilik odamlar mobil telefonlar va planshetlardan foydalanmoqdalar. Sayt sezgir bo'lishi uchun, u qayerda ko'rilishidan qat'i nazar, uning to'g'ri ko'rsatilishini ta'minlashi kerak. Agar vaqt va pul muhim bo'lsa, e'tiboringizni foydalanuvchilaringiz orasida eng mashhur bo'lgan qurilmalar turlariga (agar bu ma'lumotlar mavjud bo'lsa) va ular sizning saytingizdan qanday foydalanayotganiga qarating. Tahlil dasturidan yoki boshqa tadqiqot turlaridan foydalanib, bilib oling:
- Veb -saytni ko'rish uchun ular ko'pincha qaysi turdagi qurilmalardan foydalanadilar, mobil telefon/planshet/kompyuter markalari va ekran/piksellar soniga alohida e'tibor berishadi.
- Qaysi brauzerlar foydalanuvchilar orasida eng mashhur. Global statistikaga kelsak, Google Chrome dunyodagi eng ommabop veb -brauzer, ammo Safari ikkinchi o'rinda.
- Sizning tashrif buyuruvchilaringiz veb -saytingizni qanday ishlatishadi, masalan, uni ko'rishga qancha vaqt sarflashadi, qayerda ko'rishadi va qaysi kontent eng ommabop. Bu sizga qaysi turdagi tarkibni kiritish muhimligini va qaysi birini o'chirib qo'yish mumkinligini aniqlashga yordam beradi.
2 -qadam. Har xil qurilmalar uchun har xil tartiblarni loyihalash
Siz CSS va JavaScript kombinatsiyasidan foydalanib, foydalanuvchining qurilmasini, shuningdek uning imkoniyatlarini (Java, Flash va boshqalarni qo'llab -quvvatlaydimi) aniqlashingiz va shunga mos ravishda saytingizning muayyan versiyasini ko'rsatishingiz mumkin. CSS Media so'rovlari, ayniqsa, qurilmaning o'lchamini/piksellar sonini aniqlashda foydalidir.
3 -qadam. Har xil turdagi o'zaro ta'sirlarni hisobga olish
Sizning tashrif buyurganingiz veb-saytingiz bilan sichqoncha, klaviatura, sensorli ekran yoki hatto ko'rish qobiliyati cheklanganlar uchun ekran o'quvchi yordamida muloqot qilishi mumkin. Shuni hisobga olgan holda, sizning veb-saytingiz sichqonchani bosish, klaviatura tugmachalari (Tab, Enter, Return va boshqalar) va ekranning barmoq tegishlariga javob berishi kerak.
Hover-over effektlari sichqonchadan boshqa hech narsa bilan ishlamaydi. Bu effektlarni ishlatishning o'rniga, siz tashrif buyuruvchidan sichqonchaning tepasida ilgari ko'rsatilgan narsani ko'rsatish uchun tugma yoki belgini bosishni talab qilishingiz mumkin
Qadam 4. Kontentni boshqarish tizimidan (CMS) foydalanishni o'ylab ko'ring
Sayt dizayni sezgir bo'lishini ta'minlashning oson usuli-bu oldindan tuzilgan javob beruvchi mavzu bilan CMS-dan foydalanish. Joomla, Drupal yoki Wordpress kabi CMS -dan foydalanish sizga javob beradigan elementlarni o'zingiz kodlamasdan veb -saytingiz barcha qurilmalarda ajoyib ko'rinishini ta'minlashga imkon beradi. Sizning xizmatingizda qaysi CMS vositalari mavjudligini bilish uchun veb -xosting provayderingizga murojaat qiling.
Qadam 5. Veb -saytingizni sinab ko'rish uchun onlayn vositalardan foydalaning
Endi veb -dizaynning mashhurligi oshgani sayin, veb -saytingizni sinab ko'rish uchun foydalanishingiz mumkin bo'lgan turli xil bepul vositalar mavjud. Agar siz allaqachon veb -saytingizni kodlagan bo'lsangiz, ushbu vositalardan foydalanib, u har xil sharoitda qanday ko'rinishini sinab ko'rish uchun javobgarlikni qaerdan yaxshilash kerakligini bilib olasiz:
- Google tomonidan uyali aloqa testi: Sizning saytingiz kompyuter ekranlarida bo'lgani kabi mobil qurilmalarda ham yaxshi ishlashini bilish imkonini beradi.
- resizeMyBrowser: Saytingizni turli o'lchamlarda ko'rishga imkon beradi.
- Javob beruvchi: Saytingizni turli xil qurilmalarda (yon yoki o'ng tomonda) turli xil qurilmalar ekranlarida ko'rsatadi.
3 -usul 2: Sahifa tartibini sezgir qilish
Qadam 1. Bepul javob beradigan uslublar jadvalini ko'rib chiqing
Framework-bu oldindan yozilgan HTML, CSS va/yoki JavaScript to'plami bo'lib, siz uni saytingizning skeleti sifatida ishlatishingiz mumkin. Frameworklar barcha brauzerlar bilan ishlash uchun sinovdan o'tkazilgan va optimallashtirilgan, shuning uchun sizga faqat tarkibni kiritish, media va rang parametrlarini qo'shish va saytingizni nashr qilish kifoya. Ba'zi mashhur ramkalar:
- Bootstrap
- Skelet
- Jamg'arma
Qadam 2. Ko'rish maydonini meta teg bilan o'rnating
Agar siz ramkadan foydalanmasangiz, javob beradigan veb -saytni kodlashning eng muhim jihatidan boshlashni xohlaysiz: Viewport. Ko'rish maydoni - bu veb -saytning foydalanuvchiga ko'rinadigan qismi. Ekran o'lchamidan qat'i nazar, saytingizni to'g'ri ko'rsatishning kaliti - bu META yorlig'idagi ko'rish maydoni hajmini o'lchash. Buning uchun saytdagi har bir sahifaning yuqori qismiga ushbu tegni kiriting:
Qadam 3. Ko'rish maydoniga nisbatan matn hajmini ko'rsating
Ko'rish oynasi o'rnatilgandan so'ng, sahifangizdagi matn ekranga mos keladigan darajada o'lchanadi. Biroq, shriftlar ko'rish maydoniga nisbatan belgilanmagan bo'lsa, shriftlar juda katta yoki juda kichik ko'rinishi mumkin. Siz buni shrift hajmini vw birligi yordamida ko'rish maydonining ma'lum bir foizi sifatida belgilash orqali qilishingiz mumkin. Bu misol H1 sarlavhalarini, o'lchamidan qat'i nazar, ko'rish maydonining 10% kengligida ko'rsatilishini bildiradi:
wikiHow
Qadam 4. Har xil ekran o'lchamlari uchun turli uslublarni ko'rsatish uchun media -so'rovlardan foydalaning
Media -so'rovlar sizga ekran o'lchamiga qarab CSS -ning ba'zi elementlarini ko'rsatishni tanlash imkonini beradi. Siz CSS faylida media so'rovingizning xususiyatlarini belgilashingiz mumkin. Bu misolda, agar foydalanuvchi ekranining o'lchami 480 piksel yoki undan katta bo'lsa, tananing fon rangi qizil rangga aylanadi:
wikiHow
@media ekrani va (min-eni: 480px) {tanasi {fon-rangi: aqua; }}
3 -usul 3: tasvirlarni sezgir qilish
Qadam 1. Rasmlarni o'lchash uchun CSS width xususiyatidan foydalaning
Tasvirning kengligini ma'lum piksellar soniga (masalan, 500 piksel) o'rnatish o'rniga, foizni (masalan, 100%) ishlating, shunda tasvir ota -onaning kengligiga qaraydi va mos ravishda moslashtiriladi. Rasm kengligini 100% ga sozlash tomoshabin ekranining o'lchamiga qarab tasvirni yuqoriga va pastga siljitishga majbur qiladi. Buni onlayn qilish uchun:
2-qadam. Tasvirning haqiqiy hajmini cheklash uchun max-width xususiyatidan foydalaning
Agar siz avvalgi bosqichda kenglik xususiyatidan foydalanib, tasvirni 100% hajmiga o'tkazsangiz, tasvir kattaligidan qat'i nazar, konteynerining 100% sig'adigan darajada o'sadi yoki kichrayadi. Bu shuni anglatadiki, agar tasvir kichikroq bo'lsa, u asl o'lchamidan kattalashadi va sifati past bo'ladi. Bunga yo'l qo'ymaslik uchun tasvirning maksimal o'lchamlarini 100% ga (haqiqiy o'lchamiga) o'rnatish uchun max-width-dan foydalaning. Mana shunday:
Qadam 3. Har xil tasvir o'lchamlarini turli ekran tasvirlarida ko'rsatish uchun HTML rasm elementidan foydalaning
Agar siz har xil o'lchamdagi ekranlarda ko'rsatiladigan maxsus o'lchamdagi tasvirlarni yaratmoqchi bo'lsangiz, HTML kodingizda qaysi rasmlarni ko'rsatishni belgilashingiz mumkin. Har xil o'lchamdagi tasvirlarni yarating, so'ngra 600 va 1500 piksel kenglikdagi ekranlarda qaysi tasvirni ishlatishni ko'rsatish uchun namuna sifatida ushbu koddan foydalaning:
