السلام عليكم ورحمه الله وبركاته
في الاونه الاخيره اصبح للهواتف والاجهزه الذكيه النصيب الاكبر للزوار لهذا يجب علي موقعك ان يدعم الشاشات الصغيره والشاشات المتعدده يعني ان يكون متجاوبا واليوم اقدم لكم خدمه التجاوب مجانيه وشرح مبسط :
توافق القالب مع جميع الشاشات Responsive Web Design
الان نبدأ الشرح
ملحوظه سيتم رفع الفيديو الذي سأشرح فيه الطريقه قريبا بإذن الله
بسبب الانشغال
المهم
هذا الكود المسؤل عن توافق القالب اضفه في اكواد Css وتابع معي
/* CSS Global Responsive */
@media screen and (max-width:960px) {
}
@media only screen and (max-width:768px){
}
@media (min-width:768px) and (max-width:979px) {
}
@media (max-width:767px) {
}
@media only screen and (min-width:640px){
}
@media only screen and (max-width:640px){
}
@media only screen and (min-width:640px){
}
@media only screen and (max-width:480px){
}
@media screen and (max-width:320px){
}
الان يجب التعديل علي الكود
مثلا نقوم بإحضار الجزء الاول من الكود
@media screen and (max-width:960px) {
}
الان هذا الكود يعني الشاشه من 768 حتي مقاس 960
نقوم بإضافه الاكواد بداخله مثلا القالب الاساسي والعادي يتكون من
قائمه علويه
ثم الهيدر
ثم القائمه الثانيه
تم مكان المشاركات
ثم القائمه الجانبيه
ثم الفوتر
نقوم بإحضار معرف كل عنصر من العناصر
القائمه العلويه menu-top
الهيدر header
القائمه الثانيه menu-2
مكان المشاركات main
القائمه الجانبيه sidebar
الفوتر footer
ملحوظه : المعرفات تختلف من قالب الي اخر
طريقه احضار المعرف
تقوم بالضغط كلك يمين علي الذي تريد احضار معرفه
ثم تقوم بإختيار فحص العنصر او Inspect element
تم تجد نافذه ظهرت تجد بها المعرف كما هو موضح
اقوم الان بالتعديل كما قلت الجزء الاول من الكود يعني مقاس الشاشه 768 حتي مقاس 960
نبدأ بتعديل علي القالب القائمه الاولي
اجعلها بعرض 100% حتي تكون بعرض الشاشه بالكامل
الهيدر ايضا اجعلها بعرض 100%
والقائمه الثانيه ايضا
اما المشاركات فلا تجعلها 100% بل قم بتصغير عرضها قليلا وكذلك مع القائمه الجانبيه
حتي احصل علي كود كل من العناصر مثلا
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
ثم تضيفها الي الجزء الاول من الكود ليصبح بهذا الشكل
@media screen and (max-width:960px) {
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
نقوم بتكرار العمليه حتي نصل الي الجزء الثامن
نقوم بإخفاء القائمه الجانبيه ثم نجعل مكان المشاركات بعرض 100%
مثلا
#main { width:100%;}
#sidebar { display:none;}
ثم نقوم بإضافتها للجزء الثامن والتاسع من الكود ليصبح هكذا
@media only screen and (max-width:480px){د
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
#main { width:100%;}
#sidebar { display:none;}
}
@media screen and (max-width:320px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
#main { width:100%;}
#sidebar { display:none;}
}
الان بعد ان قمت بالتعديل علي كل الاجزاء سيصبح الكود هكذاد
/* CSS Global Responsive */@media screen and (max-width:960px) {
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (max-width:768px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media (min-width:768px) and (max-width:979px) {
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media (max-width:767px) {
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (min-width:640px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (max-width:640px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (min-width:640px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (max-width:480px){د
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
#main { width:100%;}
#sidebar { display:none;}
}
@media screen and (max-width:320px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
#main { width:100%;}
#sidebar { display:none;}
}
الان انتهي الشرح
لمن لم يفهم انا بإذن الله سأقوم بشرح الموضوع بالفيديو ورفعه قريبا
ليست هناك تعليقات:
إرسال تعليق