خطکش صفحه خطکشهای به سبک Photoshop و خطوط راهنمای قابل کشیدن به هر صفحه وب اضافه میکند. خطکشهای دقیق پیکسلی در امتداد لبههای بالا و چپ viewport قرار میگیرند و میتوانید خطوط راهنما را روی صفحه بکشید تا فاصلهها را اندازه بگیرید.
طراحانی که در Figma یا Photoshop کار میکنند برای بررسی فاصلهگذاری و تراز به خطکشها و راهنماها وابستهاند. خطکش صفحه این جریان کاری آشنا را مستقیماً به مرورگر میآورد. یک خطکش افقی با علامتگذاری در بالای viewport امتداد مییابد، و یک خطکش عمودی در لبه چپ — هر دو موقعیتهای پیکسلی را نشان میدهند.
خطکشهای دقیق با علامتگذاری در هر 50 پیکسل در امتداد لبههای بالا و چپ viewport قرار میگیرند. خطکشها با صفحه اسکرول میکنند.
از خطکش افقی drag کنید تا یک راهنمای افقی ایجاد کنید، یا از خطکش عمودی برای راهنمای عمودی. راهنماها به موقعیت مکاننما snap میکنند و مختصات دقیق پیکسل را نشان میدهند.
وقتی دو راهنمای موازی قرار داده میشوند، فاصله پیکسلی بین آنها بهطور خودکار محاسبه شده و با یک bracket و برچسب نمایش داده میشود.
راهنماهای افقی آبی، راهنماهای عمودی قرمز — تشخیص در یک نگاه را آسان میکند. هر راهنما موقعیتش را در یک badge کوچک نشان میدهد.
خطکشها و راهنماها به عنوان یک overlay شفاف رندر میشوند که روی DOM، چیدمان یا JavaScript صفحه تأثیر نمیگذارد.
هر تعداد راهنما که نیاز دارید قرار دهید — محدودیتی وجود ندارد. یک grid اندازهگیری کامل با راهنماهای افقی و عمودی ایجاد کنید.
mockup میگوید header 80px ارتفاع دارد و محتوا از 120px بالا شروع میشود. راهنماهای افقی را در آن موقعیتها قرار دهید و فوراً تأیید کنید.
راهنماها را در بالا و پایین عناصر تکراری (کارتها، آیتمهای لیست، بخشها) قرار دهید تا تأیید کنید همه فاصلهگذاری یکسانی دارند.
یک راهنمای عمودی در لبه چپ یک عنوان قرار دهید، سپس بررسی کنید آیا متن پاراگراف، دکمهها و تصاویر زیر با همان خط تراز هستند.
دو راهنمای عمودی در لبههای چپ و راست یک عنصر قرار دهید تا عرض آن را اندازه بگیرید. دو راهنمای افقی برای ارتفاع.
یک راهنمای عمودی در عرضهای breakpoint معمول (768px، 1024px، 1280px) قرار دهید و مرورگر را تغییر اندازه دهید تا بررسی کنید عناصر بهدرستی reflow میکنند.
داک شناور DevSuite Pro را باز کنید و روی آیکون خطکش صفحه کلیک کنید. خطکشهای دقیق پیکسلی در امتداد لبههای بالا و چپ viewport ظاهر میشوند.
از خطکش بالا drag کنید تا یک راهنمای افقی قرار دهید، یا از خطکش چپ برای راهنمای عمودی.
هر راهنما موقعیت پیکسلی خود را نشان میدهد. وقتی دو راهنمای موازی قرار داده میشوند، فاصله بین آنها بهطور خودکار نمایش داده میشود.
هر راهنما را drag کنید تا به موقعیت جدید برود. روی راهنما دابلکلیک کنید تا حذف شود.
دوباره روی آیکون خطکش صفحه کلیک کنید تا همه خطکشها و راهنماها پنهان شوند.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.
