Page Ruler lisää Photoshop-tyylisiä viivaimia ja vedettäviä apuviivoja mille tahansa verkkosivulle. Pikselintarkat viivaimet kulkevat näkymäalueen ylä- ja vasemmassa reunassa, ja voit vetää apuviivoja sivulle mitataksesi etäisyyksiä, tarkistaaksesi tasauksen ja varmistaaksesi välistykset — kaikki suoraan live-sivulla.
Figmassa tai Photoshopissa työskentelevät suunnittelijat nojaavat viivaimiin ja apuviivoihin välistysten ja tasausten tarkistamiseen. Mutta kun nämä suunnitelmat toteutetaan HTML/CSS-muodossa, pikselitarkkuuden varmistaminen tarkoittaa yleensä DevToolsin avaamista, elementtien tarkastelemista yksi kerrallaan ja laskettujen arvojen vertaamista malliin. Page Ruler tuo tutun viivaimen ja apuviivan työnkulun suoraan selaimeen. Vaakasuuntainen viirain asteikkoineen ulottuu näkymäalueen yläreunaan ja pystysuuntainen viirain vasempaan reunaan — molemmat näyttävät pikselikoordinaatit. Napsauta ja vedä kummasta tahansa viivaimesta vetääksesi apuviivan sivulle. Apuviivat ovat värikoodattuja (sininen vaakasuorille, punainen pystysuorille) ja näyttävät pikselikoordinaattinsa. Kahden rinnakkaisen apuviivan välinen etäisyys lasketaan automaattisesti ja näytetään. Vedä apuviivoja siirtääksesi niitä tai kaksoisnapsauta poistaaksesi. Koko peitto on huomaamaton — se sijaitsee sivun päällä vaikuttamatta asetteluun tai vuorovaikutuksiin.
Tarkat viivaimet asteikkoineen jokaisen 50 pikselin välein kulkevat näkymäalueen ylä- ja vasemmassa reunassa. Viivaimet vierittyvät sivun mukana ja näyttävät tarkat pikselikoordinaatit suhteessa sivun alkupisteeseen (0,0). Asteikkoviivat 10 px:n välein ja merkinnät joka 50 px:n kohdalla.
Napsauta ja vedä vaakaviivainta luodaksesi vaakasuoran apuviivan tai pystyviivaimesta pystysuoran apuviivan. Apuviivat napsahtavat kursorin kohdalle ja näyttävät tarkan pikselikoordinaattinsa (esim. y: 200px). Vedä siirtääksesi, kaksoisnapsauta poistaaksesi.
Kun kaksi rinnakkaista apuviivaa on asetettu, niiden välinen pikselietäisyys lasketaan automaattisesti ja näytetään yhdistävällä hakasulkeella ja merkinnällä. Aseta kaksi vaakasuoraa apuviivaa 120 px:n päähän toisistaan ja näe "120px" merkittynä niiden väliin.
Vaakasuorat apuviivat ovat sinisiä, pystysuorat apuviivat ovat punaisia — näin ne on helppo erottaa toisistaan yhdellä silmäyksellä, kun useita apuviivoja on asetettu. Jokainen apuviiva näyttää sijaintinsa pienessä merkintäkuvakkeessa.
Viivaimet ja apuviivat renderöidään läpinäkyvänä peitteenä, joka ei vaikuta sivun DOM-rakenteeseen, asetteluun tai JavaScript-toimintoihin. Voit silti napsauttaa sivuelementtejä sen läpi. Peitto kaappaa napsautukset vain viivaimista ja apuviivan kahvoista.
Aseta niin monta apuviivaa kuin tarvitset — rajoituksia ei ole. Luo täydellinen mittausverkko vaaka- ja pystysuorilla apuviivoilla merkitsemällä kaikki sivun merkittävät tasauspisteet.
Mallin mukaan otsikko on 80 px korkea ja sisältö alkaa 120 px:n etäisyydeltä yläreunasta. Aseta vaakasuorat apuviivat näihin kohtiin ja tarkista välittömästi, vastaako toteutettu sivu suunnittelumäärityksiä.
Aseta apuviivat toistuvien elementtien (kortit, listakohteet, osiot) ylä- ja alareunaan varmistaaksesi, että niillä kaikilla on sama välistys. Epäjohdonmukaiset välit elementtien välillä käyvät heti ilmeisiksi.
Aseta pystysuora apuviiva otsikon vasempaan reunaan ja tarkista, tasaantuvatko sen alla oleva leipäteksti, painikkeet ja kuvat samalle linjalle. Jopa muutaman pikselin epätasaukset näkyvät selvästi apuviivaa vasten.
Aseta kaksi pystysuoraa apuviivaa elementin vasempaan ja oikeaan reunaan mitataksesi sen leveyden. Aseta kaksi vaakasuoraa apuviivaa korkeuden mittaamiseksi. Automaattisesti laskettu etäisyys antaa tarkat pikselimitat.
Aseta pystysuora apuviiva yleisiin katkoskohtaleveyksin (768px, 1024px, 1280px) ja muuta selaimen kokoa tarkistaaksesi, uudelleenjärjestyvätkö elementit oikein jokaisessa katkoskohdassa. Apuviivat pysyvät paikallaan visuaalisina vertailukohtina.
Avaa DevSuite Pro -kelluva telakka ja napsauta Page Ruler -kuvaketta. Pikselintarkat viivaimet ilmestyvät näkymäalueen ylä- ja vasempaan reunaan.
Napsauta ja vedä yläviivaimesta asettaaksesi vaakasuoran apuviivan tai vasemmasta viivaimesta pystysuoran apuviivan. Apuviiva seuraa kursoriasi ja napsahtaa pikselikoordinaattiin, johon vapautat sen.
Jokainen apuviiva näyttää pikselikoordinaattinsa (esim. y: 200px). Kun kaksi rinnakkaista apuviivaa on asetettu, niiden välinen etäisyys näytetään automaattisesti merkityllä hakasulkeella.
Vedä mitä tahansa apuviivaa siirtääksesi sen uuteen kohtaan — etäisyysmerkinnät päivittyvät reaaliajassa. Kaksoisnapsauta apuviivaa poistaaksesi sen sivulta.
Napsauta Page Ruler -kuvaketta uudelleen piilottaaksesi kaikki viivaimet ja apuviivat. Apuviivasi koordinaatit säilyvät, jos aktivoit työkalun uudelleen saman istunnon aikana.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.
