تضيف مسطرة الصفحة مساطر بأسلوب فوتوشوب وخطوط توجيه قابلة للسحب إلى أي صفحة ويب. تمتد مساطر دقيقة بالبكسل على طول الحواف العلوية واليسرى من إطار العرض، ويمكنك سحب خطوط التوجيه إلى الصفحة لقياس المسافات والتحقق من المحاذاة والتأكد من التباعد — كل ذلك مباشرة على الصفحة المباشرة.
يعتمد المصممون العاملون في Figma أو فوتوشوب على المساطر والأدلة للتحقق من التباعد والمحاذاة. ولكن عندما يتم تنفيذ هذه التصميمات في HTML/CSS، فإن التحقق من الدقة بالبكسل يعني في العادة فتح DevTools، وتمرير الماوس فوق العناصر واحدًا تلو الآخر، ومقارنة القيم المحسوبة مع النموذج الأولي. تجلب مسطرة الصفحة سير عمل المسطرة والدليل المألوف مباشرة إلى المتصفح. تمتد مسطرة أفقية بعلامات تدرج في الجزء العلوي من إطار العرض، وتمتد مسطرة عمودية على الحافة اليسرى — كلاهما يوضحان مواضع البكسل. انقر واسحب من أي من المسطرتين لسحب خط توجيه إلى الصفحة. يتم تلوين الأدلة (أزرق للأفقي، أحمر للعمودي) وتظهر موضع البكسل الخاص بها. يتم تلقائيًا حساب المسافة بين أي دليليين متوازيين وعرضها. اسحب الأدلة لإعادة وضعها، أو انقر نقرًا مزدوجًا لإزالتها. الغطاء بأكمله غير تدخلي — فهو يستقر أعلى الصفحة دون التأثير على التخطيط أو التفاعلات.
مساطر دقيقة بعلامات تدرج كل 50 بكسل تمتد على طول الحواف العلوية واليسرى من إطار العرض. يتم التمرير مع المساطر عبر الصفحة وإظهار مواضع بكسل دقيقة بالنسبة لأصل الصفحة (0،0). علامات التدرج بفواصل 10 بكسل مع تسميات كل 50 بكسل.
انقر واسحب من المسطرة الأفقية لإنشاء دليل أفقي، أو من المسطرة العمودية للحصول على دليل عمودي. تنجذب الأدلة إلى موضع المؤشر وتعرض إحداثيات البكسل الدقيقة الخاصة بها (مثل y: 200px). اسحب لإعادة التموضع، انقر نقرًا مزدوجًا للإزالة.
عند وضع أي دليليين متوازيين، يتم تلقائيًا حساب مسافة البكسل بينهما وعرضها بقوس ربط وتسمية. ضع دليليين أفقيين بمسافة 120 بكسل بينهما لترى تسمية "120px" مكتوبة بينهما.
الأدلة الأفقية زرقاء، والأدلة العمودية حمراء — مما يسهل التمييز بينها في لمحة عند وضع أدلة متعددة. يعرض كل دليل موضعه في شارة تسمية صغيرة.
يتم تقديم المساطر والأدلة كغطاء شفاف لا يؤثر على DOM أو تخطيط الصفحة أو JavaScript. لا يزال بإمكانك النقر من خلاله للتفاعل مع عناصر الصفحة. لا يسجل الغطاء سوى النقرات على المساطر ومقاطع الأدلة.
ضع القدر الذي تحتاجه من الأدلة — لا يوجد حد. قم بإنشاء شبكة قياس كاملة بأدلة أفقية وعمودية تحدد كل نقطة محاذاة مهمة على الصفحة.
يقول النموذج إن الرأس يبلغ ارتفاعه 80 بكسل ويبدأ المحتوى على بعد 120 بكسل من الأعلى. ضع أدلة أفقية في تلك المواضع وتحقق فورًا مما إذا كانت الصفحة المُنفذة تتوافق مع مواصفات التصميم.
ضع أدلة في أعلى وأسفل العناصر المكررة (البطاقات، عناصر القائمة، الأقسام) للتحقق من أن لديهم جميعًا تباعدًا متطابقًا. تصبح الفجوات غير المتسقة بين العناصر واضحة على الفور.
ضع دليلًا عموديًا على الحافة اليسرى للعنوان، ثم تحقق مما إذا كان نص الفقرة والأزرار والصور أدناه محاذاً على نفس الخط. حتى الانحرافات ببضعة بكسلات تظهر مرئية مقابل الدليل.
ضع دليليين عموديين على الحافتين اليسرى واليمنى للعنصر لقياس عرضه. ضع دليليين أفقيين للارتفاع. توفر المسافة المحسوبة تلقائيًا أبعاد البكسل الدقيقة.
ضع دليلًا عموديًا عند أبعاد نقاط الانكسار الشائعة (768 بكسل، 1024 بكسل، 1280 بكسل) وقم بتغيير حجم المتصفح للتحقق مما إذا كانت العناصر تتدفق بشكل صحيح عند كل نقطة. تظل الأدلة ثابتة كنقاط مرجعية مرئية.
افتح اللوحة العائمة لـ DevSuite Pro وانقر فوق أيقونة مسطرة الصفحة. تظهر مساطر دقيقة بالبكسل على طول الحواف العلوية واليسرى من إطار العرض.
انقر واسحب من المسطرة العلوية لوضع خط توجيه أفقي، أو من المسطرة اليسرى لدليل عمودي. يتبع الدليل مؤشر الماوس الخاص بك وينجذب إلى موضع البكسل حيث تفلت الماوس.
يظهر كل دليل موضع البكسل الخاص به (مثل y: 200px). عند وضع دليليين متوازيين، يتم عرض المسافة بينهما تلقائيًا مع قوس مسمى.
اسحب أي دليل لنقله إلى موضع جديد — يتم تحديث تسميات المسافة في الوقت الفعلي. انقر نقرًا مزدوجًا فوق دليل لإزالته من الصفحة.
انقر فوق أيقونة مسطرة الصفحة مرة أخرى لإخفاء جميع المساطر والأدلة. سيتم الاحتفاظ بمواضع دليلك إذا قمت بإعادة التنشيط خلال نفس الجلسة.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.
