لو انت اتعلمت الـCSS أكيد هيكون عدا عليك مصطلح الـ Media Query, وممكن تكون حسيت بصعوبة في استخدامه أو فهمه, في التغريده دى هنعرف إي هو ونتكلم عنه بشكل نظري زي ماتعودنا, بحيث تكون ملم بكل حاجه تهمك في البرمجة, نبدأ بسم الله..👇
لا تنسي الدعم #ريتويت
لا تنسي الدعم #ريتويت
الـ CSS معروف إنها لغة بتدي الموقع الشكل الجمالي, ومهمتها بشكل مبسط هي انك بتقول, ادي للعنوان الفلاني اللون كذا, وادي للمربع الفلاني الحجم كذا, وحط المربع دا جنب دا, وخلي في النص وخلي النص كبير..إلخ.
الفكرة بقا إني ممكن أعمل ديزاين ويكون جميل جدا،بس بمجرد انو يتفتح من موبايل أو ايباد أو حتى لابتوب حجمه صغير،هتلاقي الديزاين دا باظ،هتلاقي حاجات دخلت في بعض أو الشكل مش لايق على حجم الشاشة (مثلا الخط كبير على الشاشة) كل دي مشاكل ممكن تقابلها بسبب تغير أحجام شاشات مستخدمين الموقع
يبقا لازم يكون الموقع بتاعنا #متجاوب (#Responsive) بمعنى أنو يتجاوب مع أي حجم, لو الشاشة صغيرة تلاقي الديزاين اتغير لديزاين يليق على الشاشة دي, ولو الشاشة كبير يرجع للديزاين الرئيسي, وهكذا.
والمهمه دي في الوقت الحالي ممكن نعملها بتلات طرق:-
1- استخدم الـ Bootstrap: ودا هنتكلم عنه في بوست لوحده ان شاء الله.
2- اعمل تصميمين, ديزاين للشاشات الكبيرة, وديزاين تاني للشاشات الصغيرة, وبالجافاسكربت أخلي أول ماليوزر يفتح الموقع أعرف شاشته حجمها إي, لو كبيرة يدخل عالرئيسي
1- استخدم الـ Bootstrap: ودا هنتكلم عنه في بوست لوحده ان شاء الله.
2- اعمل تصميمين, ديزاين للشاشات الكبيرة, وديزاين تاني للشاشات الصغيرة, وبالجافاسكربت أخلي أول ماليوزر يفتح الموقع أعرف شاشته حجمها إي, لو كبيرة يدخل عالرئيسي
لو صغيرة أوديه للينك تاني فيه التصميم المناسب(زي facebook.com و m.facebook.com) والخطوة دي عملية جدا بس مش دايما هي الحل المناسب,علعموم هي طريقة من الطرق وانت اللي بتحدد في الاخر تستخدم انهي.
3- استخدم الـMedia Query: وهي دي النقطة اللي بنتكلم عليها النهاردة
3- استخدم الـMedia Query: وهي دي النقطة اللي بنتكلم عليها النهاردة
يعني كدا عرفنا ان الميديا كويري عبارة عن #تقنية في الـCSS بتسمح إنك تخلي التصميم بتاعك متجاوب Responsive, حلو, إزاي بقا بتعمل كدا؟
الفكرة ببساطة انك بتعمل التصميم بالـCSS عادي جدا وبعد كدا في نفس صفحة الـCSS تكتب شرط باستخدام الميدياكويري,
الفكرة ببساطة انك بتعمل التصميم بالـCSS عادي جدا وبعد كدا في نفس صفحة الـCSS تكتب شرط باستخدام الميدياكويري,
مثلا تقول في الشرط دا ان يكون عرض الشاشه max 500 بيكسل, دا معناه ان أي شاشة عرضها 500 بيكسل أو أقل. حلو مالهم بقا الشاشات اللي تبع الشرط داا؟!
تروح بقا تفتح قوسين بعد الشرط وتكتب جوا القوسين دول أكواد CSS, طب كدا اي اللي هيحصل؟!
تروح بقا تفتح قوسين بعد الشرط وتكتب جوا القوسين دول أكواد CSS, طب كدا اي اللي هيحصل؟!
كدا انت بتقول للمتصفح شغل الديزاين بتاعي عادي, ولكن لو لقيت ان الشاشة أصغر من 500 بيكسل, خد من أكواد الـCSS المكتوبة بين القوسين وسيبك من اللي فوق.
يبقا ساعتها لو المتصفح لقا مثلا فوق انك عايز حجم الخط يبقا 20 بيكسل, وجوا الشرط لقا ان حجم الخط 18 بيكسل,
يبقا ساعتها لو المتصفح لقا مثلا فوق انك عايز حجم الخط يبقا 20 بيكسل, وجوا الشرط لقا ان حجم الخط 18 بيكسل,
ساعتها هيشوف عرض الشاشة لو اقل من 500 هيطبق اللي جوا الشرط ويبقا حجم الخط 18, انما لو أكبر هيبقا حجم الخط 20. وبكدا هيكون الموقع بتاعك أو الديزاين بتاعك متجاوب وبيتغير على حسب حجم الشاشة.
وطبعا زي ماقولنا دا مجرد شرح نظري عشان تبقا ملم بالتقنية, لكن صعب اشرح الأكواد في بوست, تقدر تفتح موقع w3school وتشوف ازاي تكتب الشروط دي, واي الشروط المتاحة, ومع أول تطبيق ليك للميدياكويري هتشوف مدا بساطة الموضوع.
وبــس كـدا 👌.
وبــس كـدا 👌.
جاري تحميل الاقتراحات...