CSS uzilish nuqtalarini 100% to'g'ri bajarish

Keyingi daqiqada yoki shunga o'xshash vaqtda CSS haqida unutishingizni xohlayman. Veb yaratish haqida unuting. Raqamli foydalanuvchi interfeyslari haqida unuting.

Siz bularni unutib qo'yganingiz sayin, ongingiz buzilishiga yo'l qo'yishingizni xohlayman. Vaqtni ortga qaytarish. Yoshligingizga qaytib boring. Maktabning birinchi kuniga qayting.

Bu shunchaki sodda vaqt edi, siz xavotirga soladigan narsa bu shakllarni chizish va nomuvofiqligingizni nazorat qilish edi.

Yuqoridagi nuqtalarni ko'rib chiqing. Ularning ba'zilari qanday qilib bir-biriga yig'ilib, ba'zilari tarqalib ketganiga e'tibor bering? Sizga nimani qilishingizni xohlasam, siz ularni besh guruhga bo'lishingiz mumkin, ammo siz o'zingiz yaxshi deb bilasiz.

Davom eting. Hech kim ko'rmayotganini tekshirgandan so'ng, bolangizga o'xshash barmog'ingiz bilan har beshta guruhga doira chizing.

Ehtimol siz quyida keltirilgan kabi narsalarni o'ylab topgandirsiz, shunday emasmi? (Siz nima qilsangiz ham, mashq qilmasdan pastga aylantirganingizni aytmang. Men palma bilan yuzma-yuz turaman.)

Albatta, o'ngdagi bu ikkita nuqta har ikkalasiga ham o'tib ketishi mumkin edi. Agar siz ularni guruhlarga qo'shsangiz yaxshi bo'ladi. Hech qanday noto'g'ri javob yo'q deyishadi, lekin men hech qachon xato qilmaganman, shuning uchun men hech qachon bu shafqatsizlikning oxiriga etganim yo'q.

Davom etishdan oldin, siz quyidagi kabi bir narsa chizdingizmi?

Ehtimol yo'q. To'g'ri?

Ammo, agar siz asosiy nuqtalarni mashhur qurilmalarning aniq kengligiga (320px, 768px, 1024px) mos keladigan joyga o'rnatsangiz, bu asosan nima qilish kerak.

Quyidagi tabiatdagi so'zlar sizning quloqlaringizga kirganmi yoki og'zingizdan chiqqanmi?

"O'rta bo'lak 768px gacha, yoki 768 ni o'z ichiga oladimi? Ko'ryapman ... va bu iPad landshaftimi yoki bu "katta"? Oh, katta 768px va undan yuqori. Men ko'ryapman. Va 320px kichikmi? 0 dan 319px gacha bo'lgan oraliq nima? Chumolilar uchun tanaffusmi? ”

To'g'ri o'tish nuqtalarini ko'rsatib, shu vaqtning o'zida qoldirishingiz mumkin. Ammo men yuqoridagi usul ("ahmoqona guruhlash") juda keng tarqalganligi juda qiziq.

Nega bunday bo'lishi kerak?

Menimcha, bu muammoning javobi, ko'plab muammolar singari, noto'g'ri atamalar bilan bog'liqdir. Axir, Guantanamo ko'rfazida suvda suzish juda zo'r eshitiladi, agar bularning ikkalasi nima ekanligini bilmasangiz. (Qani edi bu hazilim.)

O'ylaymanki, biz munozaralarda va tanaffuslarni amalga oshirishda "chegaralar" va "chegaralar" ni aralashtiramiz.

Ayting-chi, agar siz Sass-da uzilishlar qilsangiz, sizda "$ katta", ya'ni 768px deb nomlangan o'zgaruvchi bormi?

Bu siz aytayotgan diapazonning pastki chegarasi kattami yoki yuqori chegarami? Agar u pastki bo'lsa, unda sizda $ kichik bo'lishi kerak emas, chunki bu 0 bo'lishi kerak, to'g'rimi?

Agar bu eng katta chegara bo'lsa, unda siz katta va katta-katta o'tish nuqtasini qanday aniqlaysiz? Bu min-kengligi $ o'rtacha bo'lgan media-so'rov bo'lishi kerak, to'g'rimi?

Agar siz katta deganingizda faqat chegarani nazarda tutsangiz, unda keyinchalik chalkashliklarga duch kelamiz, chunki media-so'rov har doim bir qator bo'ladi.

Bu vaziyat notinch va biz bu haqda o'ylashga vaqt sarflamoqdamiz. Shuning uchun uchta taklifim bor:

  1. Uchish nuqtalarini to'g'ri oling
  2. O'zingizning diapazonlaringizni oqilona nomlang
  3. Deklarativ bo'ling

Maslahat №1: Maslahatlaringizni to'g'ri qabul qiling

Xo'sh, to'g'ri kesish nuqtalari nima?

Sizning bolalar bog'changizning o'zi allaqachon doiralarni jalb qilgan. Men ularni siz uchun to'rtburchaklar shaklida aylantiraman.

Agar siz gigant-monitor odamlariga biron bir alohida narsa berishni rejalashtirmoqchi bo'lsangiz, 600px, 900px, 1200px va 1800 px. Boshqa tomondan, agar siz ulkan monitorni onlayn buyurtma qilsangiz, uni kompyuter uchun belgilaganingizga ishonch hosil qiling. Siz pochtada ulkan kaltakesak olishni xohlamaysiz.

O'zingizning yosh kanalingizda o'ynagan o'sha nuqtalar 14 ta eng keng tarqalgan ekran o'lchamlarini namoyish etadi:

rasm krediti

Shunday qilib, biz ishbilarmon odamlar, dizaynerlar, ishlab chiquvchilar va testerlar sifatida kiyingan odamlar orasida so'zlarni osonlikcha oqishini ta'minlaydigan juda oz rasmni yaratamiz.

Men to'q sariq va yashil rangni tanlaganimdan afsusdaman, lekin hozir bu rasmlarning barchasini o'zgartirmayman.

Maslahat # 2: O'zingizning diapazoningizni oqilona nomlang

Agar xohlasangiz, papa-ayiq va chaqaloq-ayiqlarni ajratib berish nuqtalariga nom berishingiz mumkin. Ammo men dizayner bilan o'tirib, saytni turli xil qurilmalarda qanday ko'rinishini muhokama qilmoqchi bo'lsam, uning iloji boricha tezroq tugatilishini istayman. Agar o'lchamdagi portretli planshetga nom berish buni osonlashtirsa, men sotaman. Xek, buni hatto "iPad portreti" deb nomlaganingiz uchun kechiraman.

Siz baqirishingiz mumkin: "Ammo manzara o'zgarmoqda!" "Telefonlar kattalashmoqda, planshetlar kichraymoqda!"

Ammo veb-saytingizning CSS-ning raf muddati uch yilni tashkil etadi (agar u Gmail bo'lsa). IPad bu vaqt ichida ikki marta biz bilan birga bo'lgan va u hali ham olib tashlanishi kerak. Va bilamizki, Apple endi yangi mahsulotlarni ishlab chiqarmaydi, ular mavjud narsalarni (tugmachalar, teshiklar va hk) olib tashlaydi.

1024 x 768, odamlar, bu erda qolish uchun. Boshimizni qumga ko'mmaylik. (Qiziqarli fakt: tuyaqushlar shaharlarda yashamaydi, chunki qum yo'q va shu sababli yirtqichlardan yashirinadigan joy yo'q.)

Xulosa: aloqa muhim ahamiyatga ega. O'zingizni foydali so'z birikmalaridan maqsadsiz ajratmang.

Maslahat # 3: Deklarativ bo'ling

Bilaman, bilaman, yana “deklarativ” so'zi. Men buni boshqa yo'l bilan aytaman: sizning CSSingiz qanday sodir bo'lishini emas, balki qanday bo'lishni xohlayotganini belgilashi kerak. “Qanday” aralashtirishga qodir emas.

Oldin muhokama qilinganidek, kesishish nuqtalari atrofida tartibsizlikning bir qismi bu diapazon chegarasini belgilaydigan o'zgaruvchilar diapazon nomi sifatida ishlatiladi. $ katta: agar katta bo'lsa, 600px oddiygina ma'noga ega emas. Var koordinatalari = 4; bilan bir xil.

Shunday qilib, biz ushbu tafsilotlarni kodda ishlatilishiga yo'l qo'ymaslik uchun ularni mixin ichida yashirishimiz mumkin. Yoki biz bitta yaxshisini qila olamiz va umuman o'zgaruvchilardan foydalanmaymiz.

Dastlab men soddalashtirilgan misol sifatida quyidagi parchani qildim. Ammo, albatta, menimcha, u barcha asoslarni qamrab oladi. Uni amalda ko'rish uchun ushbu qalamni tekshirib ko'ring. Men Sass-dan foydalanyapman, chunki men u holda sayt qurishni tasavvur qila olmayman. Mantiq CSS yoki kamroq amal qiladi, xuddi shunday.

Shuni yodda tutingki, men ishlab chiqaruvchini -up yoki -fon qo'shimchasini belgilashga majbur qilaman.

Noaniqlik naslni chalkashtirib yuboradi.

Aniq tanqid bo'lishi mumkin, bu odatiy media so'rovlarini bajarmaydi. Yaxshi yangiliklar, barchaga. Agar siz o'zgacha media so'rovini xohlasangiz, shaxsiy media so'rovini yozing. (Amalda, agar menga yuqoridagilardan ko'ra murakkabroq narsa kerak bo'lsa, men yo'qotgan narsamni yo'qotib, Syuzining asboblar to'plamining mehribon quchog'iga kirib borardim.)

Yana bitta tanqid bo'lishi mumkin, menda sakkiz aralashmasi bor. Shubhasiz, bitta aralashtirish oqilona ish bo'lardi, shunda kerakli hajmda o'ting, masalan:

Albatta, bu ishlaydi. Agar siz noma'lum nom bilan kirsangiz, kompilyatsiya vaqtidagi xatolarga duch kelmaysiz. Sass o'zgaruvchisiga o'tish faqat 8 aralashmaning o'zgarishini, aralashmadagi kommutatorga o'tishni anglatadi.

Sintaksis haqida gapirmasa ham bo'ladi: "desktop-up-up {...}" bu "kattalik uchun (desktop-up) {...}" ga qaraganda ancha yoqimli.

Ushbu ikkala kod parchalarini tanqid qilish, men ikki marta 900px va 899px ni yozganligim bo'lishi mumkin. Albatta, shunchaki o'zgaruvchilardan foydalanishim va kerak bo'lganda 1-ni chiqarib tashlashim kerak.

Agar siz buni qilishni istasangiz, bananga boring, ammo men qilmaydigan ikkita sabab bor:

  1. Bu tez-tez o'zgarib turadigan narsalar emas. Bu, shuningdek, kod bazasidagi boshqa joylarda ishlatiladigan raqamlar emas. Hech qanday muammo ular o'zgaruvchan emasligi sababli yuzaga kelmaydi - agar siz o'zingizning sahifangizga JS ob'ekti bilan JS ob'ekti kiritadigan skript orqali Sass uzilish nuqtalarini ochishni xohlamasangiz.
  2. Sass-ni raqamlarni satrlarga aylantirishni xohlasangiz, sintaksis yomon bo'ladi. Quyida raqamni ikki marta takrorlash barcha yomonliklarning eng yomoni deb hisoblaganingiz uchun to'lanadigan narx:

Oh va so'nggi bir nechta paragraflarni yoqimli ohangda qabul qilganimdan beri ... Men Sass ro'yxatidagi do'konlarning ochilish nuqtalari kabi sehrli narsani qiladigan va media-so'rovlarni chiqarish uchun ularni qaytarib beradigan yoki kelajakda ishlab chiquvchilar kurashadigan shunga o'xshash masxarabozga achinaman. shifrini ochish.

Murakkablik bu xatolar yashiringan joy.

Va nihoyat, siz "men qurilmalarga emas, balki tarkibiy qismlarga asoslanib ish tutishim kerakmi?" Deb o'ylaysiz. Sizni shu paytgacha yaratganingizdan hayronman va javob ha ... bitta tartibli saytlar uchun. Yoki agar sizda bir nechta tartib mavjud bo'lsa va har bir maket uchun turli xil tanaffuslar to'plamiga ega bo'lishdan xursand bo'lsangiz. Oh, shuningdek saytingiz dizayni tez-tez o'zgarib turmasa yoki sizning dizayningiz yangilanayotgan bo'lsa, siz ularni tarkibga qarab saqlamoqchi bo'lganingiz sababli uzilish nuqtalarini yangilashdan mamnunmisiz?

Agar siz sayt bo'ylab foydalanish uchun bir nechta uzilish nuqtalarini tanlasangiz, murakkab saytlar uchun hayot ancha osonlashadi.

Bajarildi! Ammo bu xabar men xohlagan darajada jozibali bo'lmadi, menga biron bir bahonani o'ylab ko'rsam bo'ladimi, bilib qo'ying ...

Oh, bilaman!

Tanaffus nuqtasini rivojlantirish bo'yicha bonusli maslahatlar

Ha, hatto flickr-da 768 va 1400-da to'xtash nuqtalari mavjud
  1. Agar siz ekran o'lchamlari uchun siz o'tirgan monitordan kattaroq CSS uzilishlarini boshdan kechirishingiz kerak bo'lsa, Chrome DevTools-dagi 'sezgir' rejimidan foydalaning va sizga xohlagan ulkan hajmni yozing.
  2. Zangori satrda "eng keng" media-so'rovlar, to'q sariq rangda - «min-en» media-so'rovlar, yashil-yashil satrda min va max bilan media-so'rovlar ko'rsatilgan.
  3. Media so'rovini bosish ekranni shu kenglikka o'rnatadi. Agar siz yashil media so'rovini bir necha marta bosgan bo'lsangiz, u maksimal va min kengliklarda bir-biridan ikkinchisiga o'tadi.
  4. CSS-da ushbu qoidaning ta'rifiga o'tish uchun media so'rovlar panelidagi media so'rovini o'ng tugmasini bosing.

Hey, o'qish uchun rahmat! Eng zo'r g'oyalaringiz bilan sharhlang, men ularni tinglashni juda istardim. Agar meni loyiq deb o'ylasangiz yoki qalbingizni bo'sh va bo'sh qoldirsangiz, kichkina yurakni bosing, agar o'zingizni qadrlash hissi men bo'lmasangiz.