العرض المئوي

النسبة المئوية هي وحدة قياس تستخدم في تحديد أبعاد العنصر. يكون استخدام النسب المئوية رائعًا عند إدراج الصور. هنا مثال على صورة تأخذ 50% من حجم العنصر الذي يحتوي عليها. ما يعني أنه مهما تغير حجم العنصر، فإن الصورة ستأخذ نصف العرض.

article img {
  float: right;
  width: 50%;
}
<article class="clearfix"> an image

بإمكانك أيضًا استخدام min-width و max-width لتحديد أقل عرض، أو أكبر عرض يمكن للصورة أن تأخذه!.

</article>

تصميم الصفحات باستخدام العرض المئوي

يمكنك استخدام النسب المئوية في تصميم صفحات الويب، لكن ذلك سيتطلب منك وقتًا أكثر. في المثال التالي، يكون محتوى العنصر nav ملتفًا بطريقة جيدة عندما تكون نافذة المتصفح ضيقة.

nav {
  float: left;
  width: 25%;
}
section {
  margin-left: 25%;
}
<div class="container">
<section>

عندما يكون التصميم ضيقًا جدًا، يصبح العنصر nav غير ظاهر تقريبًا. والأمر الأسوأ، هو أنك لا تستطيع استخدام خاصية min-width في العنصر nav؛ لأن العمود الأيمن لن يقبل هذه الخاصية.

</section>
<section>

لوريم إيبسوم هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد الإلكتروني. انتشر بشكل كبير في ستينيّات هذا القرن مع إصدار رقائق "ليتراسيت" البلاستيكية التي تحتوي على مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل "ألدوس بايج مايكر" والتي حوت أيضاً على نسخ من نص لوريم إيبسوم.

</section>
  • Creative Commons License