A Page Ruler Photoshop-stílusú vonalzókat és húzható segédvonalakat ad hozzá bármely weboldalhoz. Pixel-pontos vonalzók futnak a nézőablak felső és bal széle mentén, és segédvonalakat húzhatsz az oldalra távolságok méréséhez, igazítások ellenőrzéséhez és térközök vizsgálatához — mindezt közvetlenül az élő oldalon.
A Figmában vagy Photoshopban dolgozó tervezők vonalzókra és segédvonalakra támaszkodnak a térközök és igazítások ellenőrzéséhez. Amikor azonban ezeket a terveket HTML/CSS-ben valósítják meg, a pixel-pontosság ellenőrzéséhez általában meg kell nyitni a DevTools-t, egyenként rámutatni az elemekre, és az összes számított értéket összehasonlítani a tervsablonnal. A Page Ruler a megszokott vonalzó-és-segédvonal munkafolyamatot közvetlenül a böngészőbe hozza. Egy vízszintes vonalzó skálabeosztásokkal a nézőablak tetején fut, egy függőleges vonalzó a bal szélen — mindkettő pixel-pozíciókat mutat. Kattints és húzz bármelyik vonalzóból egy segédvonalat az oldalra. A segédvonalak kódolt színűek (kék a vízszintesekhez, piros a függőlegesekhez), és megmutatják pixel-pozíciójukat. Bármely két párhuzamos segédvonal távolsága automatikusan kiszámításra kerül és megjelenik. Húzd a segédvonalakat az átpozicionáláshoz, vagy dupla kattintással távolítsd el. A teljes overlay nem tolakodó — az oldal tetején ül anélkül, hogy befolyásolná az elrendezést vagy az interakciókat.
Pontos vonalzók minden 50 pixelnél skálabeosztásokkal futnak a nézőablak felső és bal széle mentén. A vonalzók az oldallal együtt görgetnek, és pontos pixel-pozíciókat mutatnak az oldal origójához (0,0) képest. Skálabeosztások 10px-es intervallumonként, feliratokkal minden 50px-nél.
Kattints és húzz a vízszintes vonalzóból egy vízszintes segédvonal létrehozásához, vagy a függőleges vonalzóból egy függőleges segédvonalhoz. A segédvonalak a kurzor pozíciójához igazodnak, és megmutatják pontos pixel-koordinátájukat (pl. y: 200px). Húzd az átpozicionáláshoz, dupla kattintással eltávolíthatod.
Amikor két párhuzamos segédvonalat helyezel el, köztük a pixel-távolság automatikusan kiszámításra kerül és megjelenik összekötő zárójelekkel és felirattal. Helyezz el két vízszintes segédvonalat 120px távolságra egymástól, és lásd a köztük megjelenő "120px" feliratot.
A vízszintes segédvonalak kék, a függőlegesek piros színűek — így több elhelyezett segédvonal esetén könnyen megkülönböztethetők egyetlen pillantásra. Minden segédvonal kis felirat-jelölőn mutatja pozícióját.
A vonalzók és segédvonalak átlátszó overlayként jelennek meg, amely nem befolyásolja az oldal DOM-ját, elrendezését vagy JavaScript-jét. Az oldalelemekkel továbbra is interakcióba léphetsz átkattintással. Az overlay csak a vonalzókon és segédvonal-fogókon végzett kattintásokat rögzíti.
Annyi segédvonalat helyezz el, amennyire szükséged van — nincs korlát. Hozz létre egy teljes mérési rácsot vízszintes és függőleges segédvonalakkal, amelyek jelölik az oldal minden fontos igazítási pontját.
A tervsablon szerint a fejléc 80px magas, és a tartalom 120px-re kezdődik a tetejétől. Helyezz el vízszintes segédvonalakat ezeken a pozíciókon, és azonnal ellenőrizd, hogy a megvalósított oldal megfelel-e a tervspecifikációknak.
Helyezz el segédvonalakat ismétlődő elemek (kártyák, listatételek, szakaszok) tetején és alján, hogy ellenőrizd: mindegyikük azonos térközzel rendelkezik-e. A tételek közötti egyenetlen hézagok azonnal nyilvánvalóvá válnak.
Helyezz el egy függőleges segédvonalat egy fejléc bal szélénél, majd ellenőrizd, hogy az alatta lévő bekezdésszöveg, gombok és képek ugyanahhoz a vonalhoz igazodnak-e. Még néhány pixeles eltérések is láthatók a segédvonal mellett.
Helyezz el két függőleges segédvonalat egy elem bal és jobb széléhez a szélességének méréséhez. Helyezz el két vízszintes segédvonalat a magassághoz. Az automatikusan kiszámított távolság megadja a pontos pixel-méreteket.
Helyezz el egy függőleges segédvonalat a megszokott töréspont-szélességeknél (768px, 1024px, 1280px), és méretezd át a böngészőt, hogy ellenőrizd: az elemek minden törésponton helyesen újrarendeződnek-e. A segédvonalak rögzített vizuális referencia-pontokként maradnak.
Nyisd meg a DevSuite Pro lebegő dockot, és kattints a Page Ruler ikonra. Pixel-pontos vonalzók jelennek meg a nézőablak felső és bal széle mentén.
Kattints és húzz a felső vonalzóból egy vízszintes segédvonal elhelyezéséhez, vagy a bal vonalzóból egy függőlegeshez. A segédvonal követi a kurzort, és ahhoz a pixel-pozícióhoz igazodik, ahol elengedted.
Minden segédvonal megmutatja pixel-pozícióját (pl. y: 200px). Két párhuzamos segédvonal elhelyezésekor köztük a távolság automatikusan megjelenik feliratozott zárójelekkel.
Húzz bármely segédvonalat új pozícióba — a távolság-feliratok valós időben frissülnek. Dupla kattintással eltávolíthatsz egy segédvonalat az oldalról.
Kattints a Page Ruler ikonra ismét az összes vonalzó és segédvonal elrejtéséhez. Segédvonalaid megmaradnak, ha ugyanazon munkamenet során újra aktiválod.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 39+ fejlesztői eszközt böngészőjéhez.
