Веб -сайтты жобалау кезінде оның экран өлшемі мен пішініне қарамастан кез келген құрылғыда керемет көрінетініне көз жеткізу маңызды. Жауап беретін веб -сайттар компьютерлер, телефондар, планшеттер, теледидарлар, киінетін бұйымдар және тіпті автокөлік экрандары сияқты заманауи құрылғылардың барлық түрлерінде жақсы көрінуге арналған. Веб -сайтқа жауап беру үшін сізге белгілі бір шарттарға байланысты оның элементтерінің өлшемін автоматты түрде өзгерту үшін 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-тің алдын ала жазылған жиынтығы. Framework барлық браузерлермен жұмыс істеу үшін тексерілген және оңтайландырылған, сондықтан сізге тек мазмұнды енгізу, медиа мен түс параметрлерін қосу және сайтты жариялау қажет. Кейбір танымал құрылымдар:
- Bootstrap
- Қаңқа
- Қор
2 -қадам. Көрініс орнын мета тегпен орнатыңыз
Егер сіз жақтауды пайдаланбасаңыз, жауап беретін веб -сайтты кодтаудың маңызды аспектісінен бастағыңыз келеді: Viewport. Көру порты - бұл веб -сайттың пайдаланушыға көрінетін бөлігі. Сайттың экран өлшеміне қарамастан дұрыс көрсетілуінің кілті - бұл META тегіндегі көру портының өлшемін масштабтау. Ол үшін сайттағы әр беттің жоғарғы жағына мына тегті енгізіңіз:
3 -қадам. Мәтін өлшемін көру терезесіне қатысты көрсетіңіз
Көру порты орнатылғаннан кейін, сіздің бетіңіздегі мәтін экранға сәйкес масштабталады. Алайда, қаріптер олардың өлшемдері көру алаңына қатысты көрсетілмесе, тым үлкен немесе тым кіші көрсетілуі мүмкін. Сіз мұны қаріп өлшемін vw қондырғысымен көру портының белгілі бір пайызы ретінде анықтау арқылы жасай аласыз. Бұл мысал H1 тақырыптарына оның көлеміне қарамастан, қарау аймағының енінің 10% -ында көрсетуге нұсқайды:
wikiHow
Қадам 4. Әр түрлі экран өлшемдері үшін әр түрлі мәнерлерді көрсету үшін медиа сұрауларды пайдаланыңыз
Медиа сұраулар экранның өлшеміне байланысты белгілі бір CSS элементтерін көрсетуді таңдауға мүмкіндік береді. Сіз CSS файлында медиа сұраудың ерекшеліктерін көрсете аласыз. Бұл мысалда, егер пайдаланушының экранының өлшемі 480 пиксель немесе одан үлкен болса, дененің өң түсі қызылға айналады:
wikiHow
@media экраны және (мин. ені: 480 пиксель) {денесі {background-color: aqua; }}
3 -ші әдіс 3: суреттерді сезімтал ету
Қадам 1. Кескіндерді масштабтау үшін CSS width қасиетін пайдаланыңыз
Кескіннің енін пикселдердің белгілі бір мөлшеріне орнатудың орнына (мысалы, 500 пиксель), пайызды (мысалы, 100%) пайдаланыңыз, сонда кескін өзінің енінің еніне қарайды және сәйкесінше реттеледі. Кескіннің енін 100% -ға орнату кескінді көрермен экранының өлшеміне байланысты жоғары және төмен масштабтауға мәжбүр етеді. Мұны желіде орындау үшін:
Қадам 2. Кескіннің нақты өлшемін масштабтауды шектеу үшін max-width қасиетін пайдаланыңыз
Егер сіз алдыңғы қадамда енділікті суретті 100% масштабтау үшін қолдансаңыз, сурет өлшеміне қарамастан контейнердің 100% сыйымдылығына сәйкес өседі немесе кішірейеді. Бұл дегеніміз, егер сурет кіші жақта болса, ол бастапқы өлшемінен үлкенірек болады және сапасы төмен болады. Бұған жол бермеу үшін суреттің максималды масштабтауын 100% (оның нақты өлшемі) етіп орнату үшін max-width пайдаланыңыз. Міне осылай:
3 -қадам. Әр түрлі кескіндерді әр түрлі экран өлшемінде көрсету үшін HTML сурет элементін пайдаланыңыз
Егер сіз әр түрлі өлшемді экрандарда бейнеленетін реттелетін өлшемді суреттер жасағыңыз келсе, HTML-кодта қандай фотосуреттерді көрсету керектігін көрсете аласыз. Әр түрлі өлшемді кескіндерді жасаңыз, содан кейін бұл кодты 600 пиксельді және 1500 пиксельдік ені экрандарда қандай суретті қолдану керектігін көрсету үшін мысал ретінде қолданыңыз:
