عشان نحدد حجم شئ في صفحة الويب لازم نعطيه وحدة⭐️.
ثريد اليوم رح يكون عن الوحدات في لغة CSS مع أمثلة✨.
ثريد اليوم رح يكون عن الوحدات في لغة CSS مع أمثلة✨.
قبل ما نبدأ الثريد. أنا فاطمة العمودي ✨. خريجة علوم حاسب. أنشر محتوى عن تجربة المستخدم وبناء تطبيقات الويب.كل أسبوع أعمل فعالية عن تصميم واجهات.
الوحدات لها قسمين:
١- الوحدات النسبية (Relative Units):
هي الوحدات اللي حجمها يتغير على حسب حجم الشاشة أو حجم parent وضرورية عشان التصميم يكون متجاوب (Responsive).
٢- الوحدات المطلقة (Absolute Units):
هي الوحدات اللي حجمها يكون ثابت وما يتغير مع تغير حجم الشاشة.
١- الوحدات النسبية (Relative Units):
هي الوحدات اللي حجمها يتغير على حسب حجم الشاشة أو حجم parent وضرورية عشان التصميم يكون متجاوب (Responsive).
٢- الوحدات المطلقة (Absolute Units):
هي الوحدات اللي حجمها يكون ثابت وما يتغير مع تغير حجم الشاشة.
١.١ rem (root em):
هذه الوحدة دائما ترجع في حساب حجم الشئ إلى الأساس (root) وهو في أغلب الأحيان <html> ومن فوائدها ان اذا غير مستخدم الموقع حجم الخط في المتصفح رح يتغير حجم الخط في الموقع.
هذه الوحدة دائما ترجع في حساب حجم الشئ إلى الأساس (root) وهو في أغلب الأحيان <html> ومن فوائدها ان اذا غير مستخدم الموقع حجم الخط في المتصفح رح يتغير حجم الخط في الموقع.
مثال على rem: احنا محددين في html ان حجم الخط يكون 16px رح يصير 1rem=16px مثل ما هو موضح في الصورة . لكن إذا حددنا 32px بدل 16px رح يصير 1rem=32px.
١.٢ em:
هذه الوحدة تعتمد على حجم خط parent في تحديد حجم الخط وإذا parent مو موجود رح تشتغل تماماً مثل rem. بما انها تعتمد على parent فما رح يتغير حجم الخط في الموقع على حسب حجم الخط في المتصفح إلا إذا parent كان غير موجود.
هذه الوحدة تعتمد على حجم خط parent في تحديد حجم الخط وإذا parent مو موجود رح تشتغل تماماً مثل rem. بما انها تعتمد على parent فما رح يتغير حجم الخط في الموقع على حسب حجم الخط في المتصفح إلا إذا parent كان غير موجود.
مثال على em: الكود موضح ان parent هو div ومحدد ان حجم الخط يكون 16px رح يصير 1em=16px ولو مثلا بدل 16px كان 10px رح يصير 1em=10px.
١.٣ vh(viewport height):
هذه الوحدة تحدد طول الشئ بناء على طول الشاشة يعني مثلا div أعطيت الحجم قيمة 50vh فبصير طوله 50% من طول الشاشة.
هذه الوحدة تحدد طول الشئ بناء على طول الشاشة يعني مثلا div أعطيت الحجم قيمة 50vh فبصير طوله 50% من طول الشاشة.
مثال على vh: اول div أعطيته height: 30vh رح يأخذ 30% من طول الشاشة. ثاني div أعطيته height: 60vh رح يأخذ 60% من طول الشاشة
١.٤ vw(viewport width):
هذه الوحدة تتبع نفس قاعدة vh لكن بدل الطول رح تحدد حجم الشئ يعني 50vw مساوي ل 50% من حجم الشاشة.
هذه الوحدة تتبع نفس قاعدة vh لكن بدل الطول رح تحدد حجم الشئ يعني 50vw مساوي ل 50% من حجم الشاشة.
مثال على vw: اول div أعطيته width: 100vw رح يأخذ 100% من عرض الشاشة يعني عرض الشاشة كلها. ثاني div أعطيته width: 50vw رح يأخذ 50% من عرض الشاشة.
نيجي لأمثلة على absolute units: طبعاً لان هذه الوحدات ما تتغير مع تغير حجم الشاشة فنادر يتم أستخدامها لانها ما تدعم التصميم المتجاوب responsive design. مثال على هذه الوحدات: px, pt, pc, in, cm,man.
٢.١ px:
وحدة px تعتبر أشهر وحدة من الوحدات القياسية واللي تعتمد على دقة الشاشة.
مثال عليها: أول div اللي حجمه 40% له نفس حجم الخط في div الثاني اللي حجمه 70%.
وحدة px تعتبر أشهر وحدة من الوحدات القياسية واللي تعتمد على دقة الشاشة.
مثال عليها: أول div اللي حجمه 40% له نفس حجم الخط في div الثاني اللي حجمه 70%.
معناته ان px حجمها يكون ثابت على الشاشة الكبيرة والمتوسطة والصغيرة وهذا غلط لان لما تكون عندي مساحة كبيرة لازم الخط يكون كبير لكن لو كان المساحة صغيرة مثل الجوال المفروض الخط يتجاوب مع حجم الشاشة ويصير صغير.
الثريد يوضح أهمية استخدام relative units بدل من absolute unit لانها تسهل عملية تصميم مواقع متجاوبة بدل من كتابة media queries لكل حجم شاشة ممكن.
في نهاية الثريد اتمنى أنكم استفدتوا.
لاتنسون المشاركة لإفادة الغير وشكراً 💜
لاتنسون المشاركة لإفادة الغير وشكراً 💜
جاري تحميل الاقتراحات...