Jadvalni barcha ekran o'lchamlari uchun moslashtirish. Telefonni aylantirish oxirgi chora hisoblanadi

Aspro'da: Keyinchalik, 1.1.7 versiyasidan boshlab, jadvallarni moslashtirishingiz mumkin mobil versiyasi. O'zgartirishlar kiritish kerak manba kodi sahifalar - jadvallarning moslashuvi uchun javobgar bo'lgan sinfni qo'shing.

Mobil versiyadagi oddiy jadval sahifadan tashqariga chiqadi.

Jadvalni sezgir qilish uchun jadval qo'shilgan sahifani tahrirlashga o'ting. Keyin manba kodini tahrirlash rejimiga o'ting.

Ochilish yorlig'idan oldin

sinf bilan teg qo'shing.

Yopiladigan tegdan keyin

tegni kiriting.


...

O'zgartirishlaringizni saqlang.

Endi stol aylantiriladi va ramkadan tashqariga chiqmaydi.

Gorizontal ravishda aylantirilganda, jadval ramkadan tashqariga chiqmaydi, lekin mobil versiyada o'ngga o'tishda yon menyu ochiladi. Menyu jadval bilan ishlashga xalaqit bermasligini ta'minlash uchun siz sahifa kodiga o'zgartirishlar kiritishingiz kerak.

Oldin qo'shgan tegga "swipeignore" sinfini qo'shishimiz kerak. Natijada, tegdan oldin

sinflar bilan teg ko'rsatilishi kerak.

...

O'zgartirishlaringizni saqlang.

Endi, stolni o'ngga aylantirganda, yon menyu ochilmaydi, bu stol bilan ishlashga xalaqit berdi.

O'ngga va boshqa sahifalarga o'tishda yon menyuni yashirishingiz mumkin. Yon menyu ekranini olib tashlamoqchi bo'lgan blok tegiga "swipeignore" sinfini qo'shishingiz kerak. Agar tegda belgilangan sinf bo'lmasa, u shaklni oladi. Agar tegda allaqachon sinflar qo'shilgan bo'lsa, bo'sh joy bilan ajratilgan "swipeignore" ni yozing, masalan.

Agar siz saytda jadvallardan foydalansangiz, ular ham moslashtirilishi kerak mobil qurilmalar. Men ikkita moslashtirish variantidan foydalanaman - siqish va so'zlarni o'rash + jadvallarni bitta ustunda tartibga solish.

Birinchi variant barcha ko'p ustunli jadvallar uchun javob beradi, men ikkinchi variantni old qismdagi ba'zi saytlarda ishlataman. Menyularni jadval ko'rinishida ko'rsatishda bunday zaiflik mavjud, ammo piksellar soni pasayganda, ular shunchalik siqiladiki, ular foydalanuvchining g'azabini keltirib chiqaradi. Bitta ustunda past aniqlikdagi tarjima - yaxshi qaror, lekin, yana, siz uni barcha jadvallar uchun ishlatmasligingiz kerak.

Asosiy variant

Shunday qilib, saytdagi ko'pgina jadvallar uchun men quyidagi CSS kodidan foydalanaman:

@media ekrani va (maksimal kenglik: 1000px) (td (so'zni buzish: barchasini buzish;)

Bu blokga mos kelmaydigan so'zlar 1000 px dan kam ruxsat bilan boshlanishi kerakligini belgilaydi. yangi qator. 1000 rezolyutsiyasi misol, saytlaringizga qarang, ba'zilar uchun piksellar sonini pastroq qilib qo'yish mantiqan.

erishish yaxshi displey Jadval CSS-da qo'sh kod yordamida mumkin. Men parallel ravishda foydalanaman:

@media ekrani va (maksimal kenglik:700px)(img(maksimal kenglik:96% !important;height:auto !important;) iframe, textarea, kiritish, tugma, yuborish, video, ob'ekt, joylashtirish (maksimal kenglik: 99% !muhim;) jadval, oraliq, div, ins(maksimal kenglik:100% !muhim;)

Unda aytilishicha, ruxsati 700 px dan kam bo'lsa, jadval 100% hajmda ko'rsatiladi, ya'ni u siqilgan, lekin kengligi bo'yicha butun blokni egallaydi. Important xususiyati u 700px dan kichik boʻlgan barcha ruxsatlarga nisbatan qoʻllanilishini bildiradi.

Bir ustunda moslashish

Jadvalni past piksellar sonida bitta ustunda ko'rsatilishi uchun moslashtirish qiyinroq. Barcha jadvallar uchun mos emas, lekin ko'pincha kerak. Birinchidan, jadval uchun asl sinfni belgilang, masalan,