Pixel Ruler

A Pixel Ruler bármely weboldalon pixelben mér: képernyő-vonalzó elemméretekhez és térközökhöz.

A Pixel Ruler vonalzót tesz a képernyőre, és bármit megmérhetsz vele a böngészőben. Kattints az eszköztár ikonjára, húzd végig az egeret a felületen, és leolvasod a pontos távolságot CSS pixelben. Vidd az egeret egy elem fölé, és megkapod a szélességét, magasságát, a paddingjét és a körülötte lévő blokkoktól mért távolságokat. A számok egyeznek a DevTools értékeivel, mert a bővítmény ugyanazokat a CSS pixeleket olvassa, amelyekkel a böngésző kirajzolja az oldalt. Nincs megnyitandó panel, nincs exportálandó képernyőkép, nincs fejszámolás. Csak egy képernyővonalzó azon az oldalon, amelyet éppen nézel. Egyetlen réteg, nincs mit kapcsolgatni: 📏 Nyomd le az egeret és húzd el: megméred a távolságot az oldal bármely két pontja között. 📏 Mutass rá egy elemre, és látod a méretét, a belső margóit és a szomszédaitól mért eltolását. 📏 Helyezz el függőleges és vízszintes segédvonalakat, és igazítsd hozzájuk a blokkokat. Mindig van vonalzó a képernyőn viszonyítási pontnak, egyetlen billentyű pedig a vágólapra másolja az eredményt a kurzor alatti elem CSS-szelektorával együtt. Hogyan kezdj hozzá, három lépésben: 1. Telepítsd a bővítményt, és tűzd ki az eszköztárra. 2. Nyisd meg az oldalt, amelyen dolgozol, és kattints az ikonra. 3. Húzd, mutass rá, mérj — ha végeztél, nyomd meg kétszer az Esc billentyűt. A front-end fejlesztők a makett és a kész felület összevetésére használják. A tervezők oldalvonalzóként, amikor az átadott fájl már nem a mostani állapotot mutatja. A tesztelők valódi számmal jelentik a hibát ahelyett, hogy „a gomb kicsit lejjebb csúszott”. Aki gyorsan, pixelre pontosan akar mérni egy élő oldalon, két kattintással megkapja. Mit ad ez a webes vonalzó: - a távolságot bármely két pont között, pixelben - az oldal bármely elemének szélességét és magasságát - a belső és külső margókat, valamint a szomszédok közötti hézagokat - az elem eltolását a körülötte lévő blokkoktól - skálát az ablak felső és bal szélén - a megmért elem címkéjét, osztályait és CSS-szelektorát - újrahasznosítható segédvonalakat az igazítás ellenőrzéséhez Billentyűzettel stabil marad a kurzor: → a Shift vízszintes vagy függőleges tengelyre rögzíti a mérést → a nyílbillentyűk pontosan 1 px-szel mozdítják az aktuális pontot → az Esc törli az aktuális mérést, a második Esc visszaadja az oldalt → egy gyorsbillentyű a vágólapra másolja az eredményt Telepítsd egyszer, és ugyanaz a pixelvonalzó fut nálad, mint a Windows-, Linux- és ChromeOS-felhasználóknál, és ugyanaz, mint a Mac-felhasználóknál, mert az eszköz a böngészőben él, nem az operációs rendszerben. Nincs letöltendő pixelvonalzó, amit vadászni kellene, nincs telepítő és nincs szükség rendszergazdai jogra: a bővítmény egy kattintással érkezik a Chrome Web Store-ból. Induláskor ingyenes pixelvonalzó, minden funkció mindenki előtt nyitva. A külön ablakban megnyíló képernyővonalzó-alkalmazások mindig mást mérnek, amint az oldal elgördül. Ez a pixelvonalzó a lapon belül rajzolódik ki, és együtt gördül a tartalommal. Ez egy online pixelvonalzó: működik az élő oldalon, a staging szerveren, az ügyfél oldalán és bejelentkezés mögött is. Egy asztali pixelvonalzó, amely csak egy ablak mozdulatlan képét méri, erre nem képes. Illusztrációt vagy logót kell ellenőrizned? Használd képekhez való pixelvonalzóként — vidd fölé az egeret, és leolvasod a megjelenített méretét, ami gyakran nem egyezik a forrásfájl méretével. Kérdések és válaszok K: Hogyan mérhetek pixeleket a képernyőn a DevTools megnyitása nélkül? V: Kattints az ikonra, és húzd az egeret. A réteg az oldal fölött ül, tehát azt méred, amit valóban látsz, beleértve azokat a hover-állapotokat is, amelyek eltűnnek, ha egy panel elveszi a fókuszt. K: Képernyő-pixelvonalzó, pixeles vonalzó, px vonalzó, screen ruler, px ruler, pixelruler — melyik ez? V: Mindegyik. Az eszköz ugyanaz, csak a keresőkifejezés más. K: Tud centiméterben vagy hüvelykben mérni? V: Nem. Ez egy pixelvonalzó, és csak CSS pixelt mutat — azt az egységet, amelyet a stíluslapba is írsz. K: Mindenhol működik? V: Normál weboldalakon igen. A Chrome rendszeroldalai, a beépített PDF-néző és a cross-origin iframe belseje minden bővítmény elől zárva van, ez alól ez sem kivétel. K: Milyen adatokat gyűjt? V: Semmilyet. Nulla hálózati kérés, nincs fiók, nincs regisztráció. Telepítéskor nem kér ijesztő jogosultságot, és csak azután nyúl az oldalhoz, hogy rákattintottál az ikonra. A régi megoldások lassabbak és pontatlanabbak: műanyag vonalzót tartani a monitor üvegéhez, vagy pixeleket számolni egy képernyőképen. A számítógép képernyőjéhez való vonalzónak a böngészőben kell laknia, újra kell rajzolódnia, amikor a felület átrendeződik, és ugyanazokat az egységeket kell beszélnie, mint a kód. Pontosan ezt teszi ez a képernyőre helyezett vonalzó, és ezért jobb egy weboldalas pixelvonalzó, mint egy grafikai szerkesztőbe beillesztett képen húzott vonal. A leírás 52 nyelven elérhető, így a webes pixelvonalzó a te nyelveden is egy keresésnyire van. Telepítsd, mérj pixelt a következő megnyitott oldalon, és tartsd a képernyővonalzót egy kattintásnyira a nap hátralévő részében.