Ekran o'lchami
CSS aynan qanday o'lchamni ko'radi. Viewport, oyna va ekran o'lchamlari, hozir qaysi breakpointda turganingiz — Tailwind, Bootstrap yoki MUI — piksel zichligi va tomonlar nisbati. Oyna chetini tortishingiz bilanoq hammasi yangilanadi, va o'zingiz turmagan kenglik haqida ham so'rasangiz bo'ladi.
Viewport — hozirgi holat
- Breakpoint
- —
- Tomonlar nisbati
- —
- Piksel zichligi
- —
- Orientatsiya
- —
Breakpointlar
- base0
- sm≥640
- md≥768
- lg≥1024
- xl≥1280
- 2xl≥1536
Barcha o'lchamlar
- Viewportmedia so'rovlari aynan shuni o'lchaydi
- —
- Brauzer oynasibrauzerning o'z paneli bilan birga
- —
- Ekran (CSS piksel)monitorning to'liq o'lchami
- —
- Ekran (qurilma piksellari)CSS piksel piksel zichligiga ko'paytirilgan
- —
- Mavjud maydonekrandan dock yoki vazifalar paneli ayirilgan
- —
- Ekran tomonlar nisbati
- —
- Jami piksellar
- —
- Rang chuqurligi
- —
- To'liq ekran
- —
Keng tarqalgan qurilmalar
Qurilmani tanlang — sahifa o'sha viewport uchun javob beradi.
| Qurilma | Viewport | DPR |
|---|---|---|
| 375 × 667 | 2× | |
| 393 × 852 | 3× | |
| 430 × 932 | 3× | |
| 360 × 780 | 3× | |
| 412 × 915 | 2.625× | |
| 744 × 1133 | 2× | |
| 834 × 1194 | 2× | |
| 1024 × 1366 | 2× | |
| 1280 × 800 | 2× | |
| 1512 × 982 | 2× | |
| 1366 × 768 | 1× | |
| 1920 × 1080 | 1× | |
| 2560 × 1440 | 1× | |
| 3840 × 2160 | 1× |
Shu o'lcham uchun CSS
Qaysi o'lcham xossasini qachon ishlatish kerak
To'rt xossa to'rt xil to'rtburchakni o'lchaydi, va noto'g'risini tanlash — sahifa brauzerda to'g'ri ko'rinib, media so'rovda buzilishining eng ko'p uchraydigan sababi.
| Xossa | Nimani o'lchaydi | Qachon kerak |
|---|---|---|
| screen.width / height | Monitorning to'liq o'lchami — brauzer umuman hisobga olinmaydi. | Analitika va qurilmani taxminiy toifalash. Layout uchun hech qachon emas. |
| screen.availWidth / availHeight | Ekrandan operatsion tizim band qilgan joy — dock, vazifalar paneli, menyu — ayirilgan qismi. | Oyna aslida qanchalik katta bo'la olishini hisoblash. |
| innerWidth / innerHeight | Sahifa chizilayotgan maydon, scrollbar bilan birga. | Layoutga oid hamma narsa. CSS media so'rovlari aynan shuni o'qiydi. |
| outerWidth / outerHeight | Brauzer oynasining to'liq o'lchami: tablar, manzil satri va ramkalar bilan. | O'zingiz ochgan oynani joylashtirish. Deyarli boshqa hech narsa uchun emas. |
| devicePixelRatio | Bitta CSS pikselni nechta qurilma piksel bo'yashini. | Rasm o'lchamini tanlash va canvasda aniq chizish. |
Ko'p so'raladigan savollar
Ekran va viewport o'lchami nega har xil?
Ekran — monitoringizning to'liq o'lchami. Viewport esa sahifa chizilayotgan to'rtburchak: brauzer tablari, manzil satri, yon panellar va scrollbar ayirib tashlangan. CSS media so'rovlari viewportni o'lchaydi, shuning uchun dizaynni aynan shu raqamga qarab qilish kerak — oyna chetini tortganingizda o'zgaradigan ham o'sha, ekran o'lchami esa joyida qoladi.
Telefonim 1290×2796 deb sotiladi. Nega bu yerda 430×932 yozilgan?
Ikkalasi ham to'g'ri, faqat o'lchov birligi boshqa. Reklamadagi raqam jismoniy qurilma piksellarini sanaydi; CSS esa CSS piksellarda ishlaydi, va o'sha telefonda bitta CSS pikselni uchta qurilma piksel bo'yaydi — piksel zichligi 3. 1290 ÷ 3 = 430. Media so'rovlari, shrift o'lchamlari va stylesheetdagi har qanday uzunlik CSS pikselda hisoblanadi, shuning uchun bu sahifadagi qurilmalar jadvali ham o'shalarni ko'rsatadi.
Nega bir nechta breakpoint bir vaqtda belgilangan?
Chunki Tailwind breakpointlari min-width so'rovlari, min-width so'rovlari esa ustma-ust qo'shiladi. Kengligi 1400px bo'lganda sm:, md:, lg: va xl: bir vaqtning o'zida ishlab turadi — lg:flex bilan xl:grid urishmasligining sababi oldingisi to'xtagani emas, keyingisi manba tartibida g'olib chiqishi. Ajratib ko'rsatilgan katak — hal qiluvchi prefiks; qolganlari «o'tilgan» deb belgilangan.
Piksel zichligi amalda nimani o'zgartiradi?
Ikki narsani. Rasmlar: zichlik 2 bo'lganda 400px joy uchun 800px rasm kerak bo'ladi — srcset va 2x deskriptori aynan shuning uchun. Va canvas: elementning width atributini CSS kengligiga zichlikni ko'paytirib qo'ying, so'ng kontekstni shu koeffitsientga masshtablang; aks holda chizganingiz xira chiqadi.
Tomonlar nisbatim nega chiroyli raqam emas?
Chunki ko'p ekranlar aniq 16:9 emas. 1512×982 MacBook displeyi 756:491 ga qisqaradi — matematik jihatdan to'g'ri, lekin hech narsa demaydi. Shuning uchun bu sahifa o'lchangan nisbatni avval standartlarga 1.5% aniqlikda solishtiradi va faqat hech biri yaqin kelmasa kasr yoki o'nli songa qaytadi.