احد المشاكل اللي نواجهها اننا نستخدم البكسل دايما في الاحجام داخل الـ CSS
فين المشكله بالضبط ..❓
المشكله انو الـ px ينفع في التصاميم الثابته في الويب
فلو تغير المحتوى الكتابه او واحد فتحه تطبيقك عبر الايباد راح يختلف كل شي ويخرب شكل الويب
فندخل فإن الصفحه هنا مش responsive😤
فين المشكله بالضبط ..❓
المشكله انو الـ px ينفع في التصاميم الثابته في الويب
فلو تغير المحتوى الكتابه او واحد فتحه تطبيقك عبر الايباد راح يختلف كل شي ويخرب شكل الويب
فندخل فإن الصفحه هنا مش responsive😤
مش responsive مع المحتوى 🤯
طب ايش الحل لهذه المشكله..؟
في حاجه اسمها CSS unit جرب استخدمها
الـ Css يوفر لنا خيارات كثيره مع مختلف الاحجام عشان يتلائم مع المحتوى ويكون رسبونسف
فعندنا :
1- Absolute unit
الاحجام المعروفه px, mm ,cm
طب ايش الحل لهذه المشكله..؟
في حاجه اسمها CSS unit جرب استخدمها
الـ Css يوفر لنا خيارات كثيره مع مختلف الاحجام عشان يتلائم مع المحتوى ويكون رسبونسف
فعندنا :
1- Absolute unit
الاحجام المعروفه px, mm ,cm
2- Relative unit
واللي تركيزنا راح يكون فيه وهي rem و em
فعندنا الـem و rem
هي relative unit ومن اسمها تكون نسبيه
والفكره كل 1rem = 100% من حجم الخط فلو كانت
1.1rem = 110%
فركز معي فين نستخدمها ..👇
واللي تركيزنا راح يكون فيه وهي rem و em
فعندنا الـem و rem
هي relative unit ومن اسمها تكون نسبيه
والفكره كل 1rem = 100% من حجم الخط فلو كانت
1.1rem = 110%
فركز معي فين نستخدمها ..👇
1- نستخدم الـem
في الـpadding و margin
ليه بالضبط في padding ,margin ..؟🤔
لانه يكون متغير حسب الـ parent tag زي div
فراح يكون ثابت مهما كان المحتوى متغير
فمثلا تصميم الزر زي اللي تحت
لو كان مثلا margin:1em
راح يكون ثابت مهما تغير المحتوى عكس البكسل
في الـpadding و margin
ليه بالضبط في padding ,margin ..؟🤔
لانه يكون متغير حسب الـ parent tag زي div
فراح يكون ثابت مهما كان المحتوى متغير
فمثلا تصميم الزر زي اللي تحت
لو كان مثلا margin:1em
راح يكون ثابت مهما تغير المحتوى عكس البكسل
2- الـ rem نستخدمه في حجم الخطوط font-size
ليه طيب نستخدم rem هنا مو em..❓🧐
ببساطه لانو rem راح ياخذ حجم الخط الـ default للويب بدون مايتداخل مع الـ parent tag والـdefault هو 16px
فمثلا لو استخدمنا em
احنا راح نسوي tags كثيره في كل مشروع فراح يتضاعف حجم الخط حسب parent tag
ليه طيب نستخدم rem هنا مو em..❓🧐
ببساطه لانو rem راح ياخذ حجم الخط الـ default للويب بدون مايتداخل مع الـ parent tag والـdefault هو 16px
فمثلا لو استخدمنا em
احنا راح نسوي tags كثيره في كل مشروع فراح يتضاعف حجم الخط حسب parent tag
3- الـ precentage النسبه
وهذا غالبا يستخدم في الطول والعرض
width and height
وهذا يساعدنا انو تكون صفحتنا مقسمه دايما مهما تغير حجمها او المحتوى داخله
وهذا غالبا يستخدم في الطول والعرض
width and height
وهذا يساعدنا انو تكون صفحتنا مقسمه دايما مهما تغير حجمها او المحتوى داخله
وطبعا من الملاحظ فوق
انو كل اللي استخدمناه يبقى responsive مع المحتوى مهما تغير
وبكذا ماراح يختلف عليك شي سواء شكل الزر او حجمه او اختلاف حجم الصفحه 😍
فمثلا em يحفظ المسافه دايما ولو كان المحتوى جمله زي المثال
الـprecentage يحفظ تقسيمه الصفحه ولو شغلتها على الايباد
انو كل اللي استخدمناه يبقى responsive مع المحتوى مهما تغير
وبكذا ماراح يختلف عليك شي سواء شكل الزر او حجمه او اختلاف حجم الصفحه 😍
فمثلا em يحفظ المسافه دايما ولو كان المحتوى جمله زي المثال
الـprecentage يحفظ تقسيمه الصفحه ولو شغلتها على الايباد
نجي لسؤال طيب مهم متى استخدم pixel ..؟😱
-نستخدم الـpx لمن نتاكد ان اللي نباه ثابت
مثلا border اطراف الزر نباها دايما 1px
- نستخدمه لمن نبا نثبت محتوى بحيث مايكبر زياده ويخرب الستايل زي
min-width , max-height
-نستخدم الـpx لمن نتاكد ان اللي نباه ثابت
مثلا border اطراف الزر نباها دايما 1px
- نستخدمه لمن نبا نثبت محتوى بحيث مايكبر زياده ويخرب الستايل زي
min-width , max-height
- مع الـ Media query كشرط مثلا اذا كان بحجم الجوال مثلا 675px غير الستايل وضيف الselector اللي تبيه بحيث يكون مناسب للويب ع الجوال
الهدف من الفلم هذا كلو
- انه مو دايما نستخدم px وفيه unit ثاتيه تعطي مرونه للمحتوى بتطلعك بنتايج رهيييبه من غير ماتغير كل شوي الحجم عشان تكون عمليه اكثر
شاركني استخدامات ثانيه ورايك🧐
ولاتنسو اللايك والرتيويت🥺😈
- انه مو دايما نستخدم px وفيه unit ثاتيه تعطي مرونه للمحتوى بتطلعك بنتايج رهيييبه من غير ماتغير كل شوي الحجم عشان تكون عمليه اكثر
شاركني استخدامات ثانيه ورايك🧐
ولاتنسو اللايك والرتيويت🥺😈
Loading suggestions...