all

llآخر الأخبار

all
randompost
جاري التحميل ...
randompost

درس حول التصميم المتجاوب Responsive Design

في هذا الدرس سأشرح شرحاً مبسطا لما يعرف بتصميم المتجاوب في Web design مع أمثلة بسيطة لفهمه، نبدء على بركة الله

ما هو تصميم المتجاوب؟


التصميم المتجاوب هي تقنية تسمح لمواقع بتأقلم و تغير شكلها حسب قياس الشاشة الجهازة المستخدم للموقع مثل أجهزة هواتف و حواسيب اللوحية و غيرها، مثلا يمكنك عمل تصميم يعمل على لهاتف و أخر لأجهزة اللوحية و كل هذا عبر تحديد قياس الشاشة جهاز المراد عمل تنصيق له،

على سبيل مثال لو زرت موقع متجاوب ستلاحظ أن شكلة و تخطيطه مناسب لحجم الشاشة الجهاز، و ستلاحظ إختلاف شكله لو زرت نفس الموقع على حاسب مكتبي،

كيف يتم عمل تصميم المتجاوب؟
يتم عمل تصميم المتجاوب عبرخاصية CSS media queries و هي أحد خصائص CSS3، حيث تحدد قياس الشاشة الجهاز مراد عمل تنصيق له ثم تضيف أكواد CSS بشكل تالي،


مثال؛
رمز Code:
body {
background-color: #FD004A;
}

@media all and (max-width:400px) {
body {
background-color: #00ccff;
}
}
هذا مثال بسيط لتغير لون صفحة عندما يكون قياس الشاشة 400 بكسل عرضاً،
ملاحظة: لتعمل خاصية تجاوب على أجهزة محمولة كهواتف يجب أن تضيف كود meta viewport في ما بين وسم head،

رمز Code:
<meta name="viewport" content="width=device-width, initial-scale=1">
و لاحظتم فخاصية @media أشبه بجمل شرطية If conditions في البرمجة طبعا لمن عنده خلفية برمجية و الشرط الذي يتم تحقق منه هنا هو قياس الشاشة، حيث تقول لالمتصفح إدا كان قياس شاشة الجهاز المستخدم كدا … طبق هذا التنصيق،

شكرا لمتابعة ولو أفادكم هذا الدرس لا تنسوا مشاركته ليستفيد غيركم، تحياتي 

التعليقات



إذا أعجبك محتوى شعبي دوت كوم نتمنى البقاء على تواصل دائم ، فقط قم بإدخال بريدك الإلكتروني للإشتراك في بريد شعبي السريع ليصلك جديد الشبكة أولاً بأول ، كما يمكنك إرسال رساله بالضغط على الزر المجاور

إتصل بنا

عن شبكة شعبي دوت كوم Sh3py

شبكة شعبي أكبر شبكة ترفيهية تعليمية بالشرق الاوسط تحتوي على كل ما يبحث عنه المستخدم العربي من أخبار تقنية , برامج , نظم تشغيل , تطبيقات اندرويد , اخبار , دردشات , شبكة اجتماعية , كتب , كورسات مجانية ,اسلاميات, العاب مجانية , افلام , اغاني , شعبيات , شيلات ,

للاعلان

فقط على الأرقام التالية
01092694627
Fr3onNeT@hotmail.com
م/ احمد مجدي

اعلانات

جميع الحقوق محفوظة

شعبي

2016