Responsive veb-dizaynda moslashuvchan tasvirlar adaptiv tasvirlar deb ham ataladi. Ular displey o'lchamiga hech qanday cheklovlarsiz tasvir echimlarini taqdim etadi. Bu tasvirlarni aniq va chiroyli tarzda o'zgartirishga yordam beradi.
Tasvirlar quyidagi misoldan foydalangan holda o'z ichiga olgan elementlarning 100% gacha masshtablash uchun yaratilgan:
img {
max-width:100%;}
Tasvirlarni kattaroq ko'rish maydoni o'lchamlariga o'tkazish uchun ular yaxshi ko'rsatilishi uchun etarlicha katta bo'lishi kerak. Kenglik xususiyati foizga, balandlik xususiyati esa “avtomatik” ga oʻrnatilgan boʻlsa, tasvir sezgir boʻladi va masshtabni yuqoriga yoki pastga tushiradi. Masalan:
img {
width: 100%;
height:auto
}
media query
CSS media so'rovlari sezgir veb-dizaynning eng muhim qismlaridan biridir.
Media soʻrovi veb-sahifa mazmunini sahifa koʻrsatilgan media turiga moslashtirish imkonini beruvchi CSS3 xususiyatidir.Responsive media soʻrovining asosiy sintaksisi:
{ body {
text-align: center;
background-color: #87ceeb;
}
p {
font-size: 1.5rem;
}
@media (min-width: 600px) and (max-width: 768px) {
body {
background-color: #de3163;
}
}
}
Media so'rovlari ko'rish oynasi kengligi yoki boshqa parametrlarga asoslangan muqobil CSS uslublarini taqdim etish imkonini beradi. Shuningdek, ular sizga bir nechta ekran o'lchamlarini belgilash va sahifani sezgir qilish imkonini beradi. Bundan tashqari, ular to'xtash nuqtalarini aniqlashda yordam beradi.
Ta'sirchan veb-dizayn, veb-dizaynning boshqa turlari kabi, o'ziga xos to'siqlarga ega. Ushbu to'siqlarning eng muhimlari orasida:
Avvalo, mobil qurilmada veb-saytni ko'rayotgan shaxslar butun saytni ish stolida ko'rayotganlar bilan bir xil tarkibni ko'rishni kutadimi yoki yo'qligini aniqlashingiz kerak. Taqdim etilgan tarkib qurilmalarga qarab farq qilishini ham bilishingiz kerak.
Katta tasvirlar va boshqa ommaviy axborot vositalari odatda kichikroq ekranlarga moslashish uchun kichraytirilishi mumkin, ammo natijada sayt tezligi sekinlashadi.
mumkin bo'lgan barcha ko'plab qurilmalarda sezgir veb-dizayn veb-saytini sinab ko'ra olmaysiz.
Do'stlaringiz bilan baham: |