[ طلب شرح ] كيف اجعل الاستايل يتوافق مع الجوالات

السلام عليكم ورحمة الله وبركاته . اسعد الله اوقاتكم اعضاء وزوار وطاقم فريق العمل . الكرام عندي سؤال وياليت الر ..


موضوع مغلق


16-01-2017 09:52 صباحا
عبدالاله الهذلي
عضـو نشيط
rating
العضو غائب جامعة والله يوفقني
معلومات الكاتب ▼
تاريخ الإنضمام : 23-08-2016
رقم العضوية : 6837
المشاركات : 429
الدولة : الطائف
الجنس : ذكر
تاريخ الميلاد : 1-5-1998
الدعوات : 1
قوة السمعة : 700
عدد الإجابات: 22
اصدار المنتدى : 3.0.2
 offline 




السلام عليكم ورحمة الله وبركاته .



اسعد الله اوقاتكم
اعضاء وزوار وطاقم فريق العمل . الكرام

عندي سؤال وياليت الرد عليه بأجابة مقنعة 46345

كيف اجعل الاستايل يتوافق مع الجوالات
زي الجلكسي الايفون و غيرها .!

# واول تجربة راح اسوي فيها استايل ماتين2
805681










تم تحرير الموضوع بواسطة :عبدالاله الهذلي
بتاريخ:16-01-2017 09:54 صباحا



أفضل إجابة مقدمة من Soliman وهي:
المشاركة الأصلية كتبت بواسطة: عبدالاله الهذلي »
طيب وطريقة صعبة ولمطولة 


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

ثم تضيف أكواد CSS اسفل ملف style.css الخاص بالاستايل:
مثال :
يتصفح منتداي شخص من شاشة جوال عرضها أقل من 480px 
فتضيف هذا الكود في الأسفل تماماً ملف style.css الخاص بالاستايل
@media screen and (max-width: 480px) {

وهنا تضيف جميع الكلاسات التي تريد ان تغييرها لتتوافق مع عرض الشاشة الأقل من 480px
مثلاً لتغير العرض 
width: 40%;
min-width: 40%;
أو الإخفاء 
display: none;

الخ ........ 

}


وكل مرة تعمل تعديل افتح المنتدى وصغر الشاشة أي حاول تكبير/تصغير دقة الشاشة وشاهد تعديلاتك الجديدة على الشاشة الصغيرة

و لعمل تصميم المتجاوب يعمل على عدة قياسات أخرى مختلفة لأجهزة يتم عمل تنسيق css لكل قياس بشكل التالي:

@media screen and (max-width:1280px) {
 // CSS STYLE FOR DESKTOP

 } @media screen and (max-width:900px) { 
// CSS STYLE FOR TAPLETS
 } 
@media screen and (max-width:736px) { 
// CSS STYLE FOR PHONES
 } 
@media screen and (max-width:300px) { 
// CSS STYLE FOR SMALL PHONES
 }


اضافة إلى أنه  يجب أن تضيف كود m*eta viewport في ما بين وسم head  في قالب headinclud الخاص بالأستايل
لتعمل خاصية التجاوب على أجهزة المحمولة كهواتف
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> ​ 


لمزيد من التفاصيل شاهد ملف style.css للأستايل الافتراضي للنسخة او لأي ستايل آخر متوافق اجهزة الجوال السابق ذكرها في ردي السابق


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

موفق  smile
عرض الإجابة




16-01-2017 02:25 مساء
مشاهدة مشاركة منفردة [1]
Mr King
PBB Staff
rating
العضو غائب
معلومات الكاتب ▼
تاريخ الإنضمام : 27-11-2012
رقم العضوية : 2642
المشاركات : 3230
الدولة : morocco
الجنس : ذكر
تاريخ الميلاد : 1-1-1987
الدعوات : 6
قوة السمعة : 18670
موقعي : زيارة موقعي
عدد الإجابات: 6
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif [ طلب شرح ] كيف اجعل الاستايل يتوافق مع الجوالات
مرحبا بك،

أسهل طريقة هي الانطلاق من أحد الاستايلات المتوافقة مع الجوال من أجل الحصول على مبتغاك

مثلا استبدل خلفيات الاستايل الافتراضي بخلفيات استايل ماتين

16-01-2017 08:39 مساء
مشاهدة مشاركة منفردة [2]
عبدالاله الهذلي
عضـو نشيط
rating
العضو غائب جامعة والله يوفقني
معلومات الكاتب ▼
تاريخ الإنضمام : 23-08-2016
رقم العضوية : 6837
المشاركات : 429
الدولة : الطائف
الجنس : ذكر
تاريخ الميلاد : 1-5-1998
الدعوات : 1
قوة السمعة : 700
عدد الإجابات: 22
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif [ طلب شرح ] كيف اجعل الاستايل يتوافق مع الجوالات
ياليت توضح اكثر واكثر ..!

ماهي القوالب يلي تحتاج لتعديل 
CSSايش اضيف فيه وايش احذف ... 


تم تحرير المشاركة بواسطة :عبدالاله الهذلي
بتاريخ:16-01-2017 08:40 مساء


16-01-2017 10:08 مساء
مشاهدة مشاركة منفردة [3]
Soliman
PBB Management
rating
العضو غائب ظروف العمل
معلومات الكاتب ▼
تاريخ الإنضمام : 18-07-2009
رقم العضوية : 1
المشاركات : 11237
الدولة : السعودية
الجنس : ذكر
تاريخ الميلاد : 6-1-1980
الدعوات : 51
قوة السمعة : 67026
موقعي : زيارة موقعي
عدد الإجابات: 178
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif [ طلب شرح ] كيف اجعل الاستايل يتوافق مع الجوالات
وعليكم السلام
سؤالك بسيط لكن الأجابة عليه يطول شرحها وليست بالسهله 
لكن الاسهل هو ان تضع استايل خاص لمتصفحى الجوال 
مثل  (الاستايل الافتراضي - ستايل أوركيدستايل pbbsup - ستايل Elitesستايل Dark Flat - ستايل سما العرب الأزرق ) فهذه جميعها ستايلات جاهزة متوافقه مع الجوال

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

ثم توجه إلى صفحة اختبار التناسب مع الجوّال - Google Search Console التي يوفرها قوقل
واختبر تناسب منتداك مع الجوال لترى النتيجة
 

16-01-2017 11:03 مساء
مشاهدة مشاركة منفردة [4]
عبدالاله الهذلي
عضـو نشيط
rating
العضو غائب جامعة والله يوفقني
معلومات الكاتب ▼
تاريخ الإنضمام : 23-08-2016
رقم العضوية : 6837
المشاركات : 429
الدولة : الطائف
الجنس : ذكر
تاريخ الميلاد : 1-5-1998
الدعوات : 1
قوة السمعة : 700
عدد الإجابات: 22
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif [ طلب شرح ] كيف اجعل الاستايل يتوافق مع الجوالات
طيب وطريقة صعبة ولمطولة 

17-01-2017 12:43 صباحا
مشاهدة مشاركة منفردة [5]
Soliman
PBB Management
rating
العضو غائب ظروف العمل
معلومات الكاتب ▼
تاريخ الإنضمام : 18-07-2009
رقم العضوية : 1
المشاركات : 11237
الدولة : السعودية
الجنس : ذكر
تاريخ الميلاد : 6-1-1980
الدعوات : 51
قوة السمعة : 67026
موقعي : زيارة موقعي
عدد الإجابات: 178
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif [ طلب شرح ] كيف اجعل الاستايل يتوافق مع الجوالات
المشاركة الأصلية كتبت بواسطة: عبدالاله الهذلي »
طيب وطريقة صعبة ولمطولة 


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

ثم تضيف أكواد CSS اسفل ملف style.css الخاص بالاستايل:
مثال :
يتصفح منتداي شخص من شاشة جوال عرضها أقل من 480px 
فتضيف هذا الكود في الأسفل تماماً ملف style.css الخاص بالاستايل
@media screen and (max-width: 480px) {

وهنا تضيف جميع الكلاسات التي تريد ان تغييرها لتتوافق مع عرض الشاشة الأقل من 480px
مثلاً لتغير العرض 
width: 40%;
min-width: 40%;
أو الإخفاء 
display: none;

الخ ........ 

}


وكل مرة تعمل تعديل افتح المنتدى وصغر الشاشة أي حاول تكبير/تصغير دقة الشاشة وشاهد تعديلاتك الجديدة على الشاشة الصغيرة

و لعمل تصميم المتجاوب يعمل على عدة قياسات أخرى مختلفة لأجهزة يتم عمل تنسيق css لكل قياس بشكل التالي:

@media screen and (max-width:1280px) {
 // CSS STYLE FOR DESKTOP

 } @media screen and (max-width:900px) { 
// CSS STYLE FOR TAPLETS
 } 
@media screen and (max-width:736px) { 
// CSS STYLE FOR PHONES
 } 
@media screen and (max-width:300px) { 
// CSS STYLE FOR SMALL PHONES
 }


اضافة إلى أنه  يجب أن تضيف كود m*eta viewport في ما بين وسم head  في قالب headinclud الخاص بالأستايل
لتعمل خاصية التجاوب على أجهزة المحمولة كهواتف
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> ​ 


لمزيد من التفاصيل شاهد ملف style.css للأستايل الافتراضي للنسخة او لأي ستايل آخر متوافق اجهزة الجوال السابق ذكرها في ردي السابق


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

موفق  smile

17-01-2017 01:29 صباحا
مشاهدة مشاركة منفردة [6]
عبدالاله الهذلي
عضـو نشيط
rating
العضو غائب جامعة والله يوفقني
معلومات الكاتب ▼
تاريخ الإنضمام : 23-08-2016
رقم العضوية : 6837
المشاركات : 429
الدولة : الطائف
الجنس : ذكر
تاريخ الميلاد : 1-5-1998
الدعوات : 1
قوة السمعة : 700
عدد الإجابات: 22
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif [ طلب شرح ] كيف اجعل الاستايل يتوافق مع الجوالات
يشيخ وش اقول وكيف اقول ...!

يعطيك الف عافية يالامير  ...2flw5
ويعطيك العافية على شرحح ان شاء الله ابدع فيه ..


805681

... #Close ..


المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
[مجابه] كيف اجعل صورة القسم عند الضغط عليها تنقلني له jeiro33
10 922 AHMED
[مجابه] ماهو قالب معلومات الكاتب وكيف اخططه واجعله مميز jeiro33
2 527 isma3eliano
[مجابه] كيف اجعل اسم العضو عريض او مائل jeiro33
4 452 عبد العزيز
[مجابه] كيف اجعل المجلة هى الصفحة الرئيسية ebrimnubian
3 463 نجم الويب
[مجابه] كيف اجعل الروابط مغلقه امام الزوار hamza_joker
3 609 AHMED

الكلمات الدلالية
اجعل ، الاستايل ، يتوافق ، الجوالات ،







الساعة الآن 11:44 صباحا