Pixel Ruler

Naudokite Pixel Ruler pikseliams matuoti bet kurioje svetainėje: liniuotė ekrane elementų dydžiams ir tarpams.

Pixel Ruler uždeda liniuotę ant ekrano ir leidžia išmatuoti bet ką naršyklėje. Spustelėkite įrankių juostos piktogramą, vilkite pele per maketą ir perskaitykite tikslų atstumą CSS pikseliais. Užveskite žymeklį ant elemento – pamatysite jo plotį, aukštį, vidines paraštes ir atstumus iki gretimų blokų. Skaičiai sutampa su DevTools, nes plėtinys skaito tuos pačius CSS pikselius, kuriais naršyklė piešia puslapį. Nereikia atidaryti jokio skydelio, eksportuoti ekrano nuotraukos ar skaičiuoti mintyse. Tiesiog ekrano liniuotė ant svetainės, kurią jau žiūrite. Vienas sluoksnis, nėra tarp ko blaškytis: 📏 Nuspauskite ir vilkite, kad išmatuotumėte atstumą tarp bet kurių dviejų puslapio taškų. 📏 Nukreipkite žymeklį į elementą ir matykite jo dydį, vidines paraštes bei poslinkius nuo kaimynų. 📏 Padėkite vertikalias ir horizontalias kreipiamąsias ir lygiuokite blokus pagal jas. Liniuotė visada matoma ekrane kaip atskaitos taškas, o vienas klavišas nukopijuoja rezultatą į iškarpinę kartu su po žymekliu esančio elemento CSS selektoriumi. Kaip pradėti per tris žingsnius: 1. Įdiekite plėtinį ir prisekite jį prie įrankių juostos. 2. Atidarykite puslapį, su kuriuo dirbate, ir spustelėkite piktogramą. 3. Vilkite, užveskite, matuokite – baigę du kartus paspauskite Esc. Front-end kūrėjai naudoja jį maketui palyginti su dizaino projektu. Dizaineriai – kaip puslapio liniuotę, kai perduotas failas jau nebeatitinka tikrovės. QA inžinieriai klaidą aprašo tikru skaičiumi, o ne fraze „mygtukas atrodo šiek tiek per žemai“. Kiekvienas, kuriam reikia greito pikselių matavimo gyvoje svetainėje, jį gauna dviem spustelėjimais. Ką suteikia ši interneto liniuotė: - atstumą tarp bet kurių dviejų taškų pikseliais - bet kurio puslapio elemento plotį ir aukštį - vidines ir išorines paraštes bei tarpus tarp kaimyninių elementų - elemento poslinkius nuo jį supančių blokų - skales viršutiniame ir kairiajame lango krašte - išmatuoto elemento žymą, klases ir CSS selektorių - pakartotinai naudojamas kreipiamąsias lygiavimui tikrinti Valdymas klavišais neleidžia žymekliui krustelėti: → Shift fiksuoja matavimą horizontalioje arba vertikalioje ašyje → Rodyklių klavišai pastumia esamą tašką lygiai 1 px → Esc išvalo esamą matavimą, antras Esc grąžina puslapį → Vienas spartusis klavišas nukopijuoja rezultatą į iškarpinę Įdiekite kartą – turėsite tą pačią pikselių liniuotę, kurią naudoja Windows, Linux ir ChromeOS vartotojai, ir tą pačią pikselių liniuotę, kurią naudoja Mac vartotojai, nes įrankis gyvena naršyklėje, o ne operacinėje sistemoje. Nereikia ieškoti jokio pikselių liniuotės atsisiuntimo, jokio diegimo failo ir jokių administratoriaus teisių: plėtinys atkeliauja iš Chrome Web Store vienu spustelėjimu. Starto metu tai nemokama pikselių liniuotė, visos funkcijos atviros visiems. Ekrano liniuotės programa, atsidaranti atskirame lange, ima matuoti visai ne tą vietą, vos tik puslapis paslenka. Ši pikselių liniuotė piešiama pačioje kortelėje ir slenka kartu su turiniu. Tai pikselių liniuotė internete: ji veikia gyvame puslapyje, staging serveryje, kliento svetainėje, už prisijungimo. Darbalaukio pikselių liniuotė, matuojanti statišką lango vaizdą, to nesugeba. Reikia patikrinti iliustraciją ar logotipą? Naudokite ją kaip pikselių liniuotę paveikslėliams – užveskite žymeklį ant nuotraukos ir perskaitykite jos atvaizduotą dydį, kuris dažnai skiriasi nuo dydžio šaltinio faile. Klausimai ir atsakymai K: Kaip išmatuoti ekrano pikselius neatidarant DevTools? A: Spustelėkite piktogramą ir vilkite. Sluoksnis yra virš puslapio, tad matuojate tai, ką iš tikrųjų matote, įskaitant užvedimo būsenas, kurios dingsta, kai skydelis perima fokusą. K: Ekrano pikselių liniuotė, pikselių matuoklė, px liniuotė, screen ruler, px ruler, pixelruler – kuris iš jų yra šis? A: Visi. Įrankis tas pats, keičiasi tik paieškos frazė. K: Ar galima matuoti centimetrais arba coliais? A: Ne. Tai pikselių liniuotės įrankis ir jis rodo tik CSS pikselius – tą patį vienetą, kurį rašote stiliaus lape. K: Ar veikia visur? A: Įprastose svetainėse – taip. Chrome sisteminiai puslapiai, integruota PDF peržiūros programa ir cross-origin iframe vidus yra uždari kiekvienam plėtiniui, įskaitant šį. K: Kokius duomenis renka? A: Jokių. Nulis tinklo užklausų, jokios paskyros, jokios registracijos. Diegiant neprašo jokio bauginančio leidimo, o puslapį paliečia tik tada, kai spustelite piktogramą. Seni įpročiai lėtesni ir mažiau tikslūs: laikyti plastikinę liniuotę prie kompiuterio ekrano stiklo arba skaičiuoti pikselius ekrano nuotraukoje. Liniuotė kompiuterio ekranui turi gyventi naršyklėje, persipiešti, kai maketas persitvarko, ir kalbėti tais pačiais vienetais kaip kodas. Būtent tai daro šis ekrano liniuotės sluoksnis, ir todėl svetainės pikselių liniuotė pranašesnė už brūkšnį, nubrėžtą ant ekrano vaizdo, įklijuoto į grafikos redaktorių. Aprašas pateikiamas 52 kalbomis, tad interneto pikselių liniuotė ir jūsų kalba yra vos vienos paieškos atstumu. Įdiekite, išmatuokite pikselius kitame atidarytame puslapyje ir palikite ekrano liniuotę vieno spustelėjimo atstumu visai likusiai dienai.