ርቀት ይለኩ በማንኛውም ድረ-ገጽ ላይ ማንኛውንም ሁለት ኤለመንቶች ጠቅ ያድርጉ ወዲያውኑ በመካከላቸው ያለውን ትክክለኛ ፒክሰል ርቀት ይመልከቱ — አግድም (X)፣ ቁመት (Y) እና ሰያፍ። ቀለም ያላቸው መስመሮች ሁለቱን ኤለመንቶች ያገናኛሉ ለእያንዳንዱ አቅጣጫ ስያሜ ያለው ልኬት ጋር።
በብራውዘር DevTools ውስጥ ሁለት ኤለመንቶች መካከል ያለውን ስፔሲንግ መፈተሽ እያንዳንዱን ኤለመንት ለየብቻ ማንዣበብ እና አእምሮ ስሌት ማድረግ ያስፈልጋል። ርቀት ይለኩ ይህን ሙሉ ለሙሉ ያስወግዳል — ኤለመንት A ጠቅ ያድርጉ ኤለመንት B ጠቅ ያድርጉ ፒክሰል ርቀቶች ወዲያውኑ ይታያሉ።
መጀመሪያውን ኤለመንት ጠቅ ያድርጉ (ሰማያዊ ድንበር ይደመቃል) ከዚያ ሁለተኛውን (አረንጓዴ ድንበር)። በ bounding boxes መካከል ያሉ ርቀቶች ተሰልተው ወዲያውኑ ይታያሉ።
አግድም ርቀት (X)፣ ቁመት ርቀት (Y) እና ሰያፍ ርቀት በአንድ ጊዜ ይመልከቱ — ማንኛውም ቀለም-coded ልኬት መስመር እና ስያሜ ጋር።
ነቁጥ ልኬት መስመሮች ሁለቱን የተመረጡ ኤለመንቶች በቀጥታ በገጹ ላይ ያገናኛሉ ከእያንዳንዱ መስመር መሃል ላይ ርቀት ስያሜዎች ጋር።
ማንኛውም የተመረጠ ኤለመንት ስፋት × ቁመት ልኬቶችን ትንሽ ስያሜ ያሳያል። ኤለመንት መጠኖችን እና ስፔሲንግ በአንድ እይታ ይመልከቱ።
ልኬቶችን ወዲያውኑ ለማዘመን አዲስ ጥንድ ኤለመንቶች ጠቅ ያድርጉ። መሳሪያውን ማጥፋት እና ማንቃት አያስፈልግም።
ከ viewport ታች ያለ ቋሚ መረጃ አሞሌ ጥቅል ማጠቃለያ ያሳያል — ሁለቱም ኤለመንቶች ስሞችና ልኬቶች ከሶስቱም ርቀት ዋጋዎች ጋር።
Mockup ቁልፉ ከርዕሱ ከ 24px በታች መሆን አለበት ይላል። ርዕሱን ጠቅ ያድርጉ ቁልፉን ጠቅ ያድርጉ Y ርቀት 24px መሆኑን ያረጋግጡ።
ካርድ 1 እና ካርድ 2 መካከል ያለውን ርቀት ይለኩ ከዚያ ካርድ 2 እና ካርድ 3 መካከል። ክፍተቶቹ ተመሳሳይ ካልሆኑ ወጥነት ማጣት አግኝተዋል።
በዴስክቶፕ ስፋት ኤለመንት ርቀቶችን ይለኩ ከዚያ ብራውዘሩን ያስተካክሉ በሞባይል ስፋት ዳግም ይለኩ።
ትክክለኛ ልኬቶችን በስህተት ሪፖርቶችዎ ውስጥ ያካትቱ — "በ nav እና hero መካከል ያለው ክፍተት 47px ነው ከንድፍ spec 32px መሆን ነበረበት"።
አግድም ሊጣጣሙ የሚገባቸው ሁለት ኤለመንቶችን ጠቅ ያድርጉ። Y ርቀት 0px ከሆነ ፍጹም ተጣጥመዋል።
የ DevSuite Pro ተንሳፋፊ ዶክ ይክፈቱ እና ርቀት ይለኩ አዶን ጠቅ ያድርጉ።
በገጹ ላይ ማንኛውንም ኤለመንት ጠቅ ያድርጉ። ሰማያዊ ድንበር ይደመቃል "ኤለመንት A" ተብሎ ከልኬቶቹ ጋር ይሰየማል።
ሁለተኛ ኤለመንት ጠቅ ያድርጉ። አረንጓዴ ድንበር ይደመቃል። ልኬት መስመሮች ሁለቱን ኤለመንቶች ያገናኛሉ ወዲያውኑ ይታያሉ።
ሶስት ልኬት መስመሮች ይታያሉ — አግድም (X) ብርቱካናማ፣ ቁመት (Y) ቀይ፣ ሰያፍ ሐምራዊ። መረጃ አሞሌ ሁሉንም ዋጋዎች ያጠቃልላል።
አዲስ ርቀት ለመለካት ሌላ ጥንድ ኤለመንቶች ጠቅ ያድርጉ። ሲጨርሱ መሳሪያ አዶን ጠቅ ያድርጉ።
DevSuite Pro ን በነፃ ይጫኑ እና 39+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።
