الان طريقه جعل القالب متوافق مع جميع الشاشات

  الان طريقه جعل القالب متوافق مع جميع الشاشات Responsive web design من الوليد نت

 

السلام عليكم ورحمه الله وبركاته 
في الاونه الاخيره اصبح للهواتف والاجهزه الذكيه النصيب الاكبر للزوار لهذا يجب علي موقعك ان يدعم الشاشات الصغيره والشاشات المتعدده يعني ان يكون متجاوبا واليوم اقدم لكم خدمه التجاوب مجانيه وشرح مبسط :
توافق القالب مع جميع الشاشاتResponsive Web Design

 
الان نبدأ الشرح
هذا الكود المسؤل عن توافق القالب اضفه في اكواد Css وتابع معي
فوق وسم

  ]]></b:skin>

/* 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;}
}

  الان انتهي الشرح

الان طريقه جعل القالب متوافق مع جميع الشاشات الان طريقه جعل القالب متوافق مع جميع الشاشات بواسطة walid al Bana on 7:51:00 ص القسم: 5

ليست هناك تعليقات :

يتم التشغيل بواسطة Blogger.