كيفية جعل موقعك متوافق مع جميع الأجهزة - Responsive

Abdo Salem | السبت, أكتوبر 04, 2014 | 3 | تعديل

جعل موقعك متوافق مع جميع الأجهزة - Responsive

إذا كنت تمتلك موقع فأكيد زوارك يدخلون موقعك بالهاتف أو الأجهزة اللوحية, يعني يجب أن يكون موقعك متوافق مع جميع الأجهزة - Responsive ليظهر جيدا في الهاتف والأجهزة اللوحية.
بعض الأشخاص يظنون أن جعل مواقعهم متوافقة مع جميع الأجهزة - Responsive صعب, لكنه سهل جدا لكن يحتاج بعض الجهد لأنك كل ما ستقوم به هو إنشاء نسخة لكل نوع من أجهزة التصفح عن طريق التعديل على ملف الـCSS الخاص بموقعك.

كيفية جعل موقعك متوافق مع جميع الأجهزة - Responsive

1 - ضع هذا الكود فوق </head>.

<meta name = "viewport" content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0"/>

2 - ضع هذا الكود في ملف الـCSS الخاص بموقعك.

@media screen and (max-width:1024px) { CSS FOR Max WIDTH 1024Px }
@media screen and (max-width:768px) { CSS FOR Max WIDTH 768Px }
@media screen and (max-width:640px) { CSS FOR Max WIDTH 640Px }
@media screen and (max-width:480px) { CSS FOR Max WIDTH 480Px }
@media screen and (max-width:320px) { CSS FOR Max WIDTH 320Px }

3 - قم بتغيير :
- CSS FOR Max WIDTH 1024Px -> الـCSS الخاص بالشاشات التي عرضها أقل من 1024Px.
- CSS FOR Max WIDTH 768Px -> الـCSS الخاص بالشاشات التي عرضها أقل من 768Px.
- CSS FOR Max WIDTH 640Px -> الـCSS الخاص بالشاشات التي عرضها أقل من 640Px.
- CSS FOR Max WIDTH 480Px -> الـCSS الخاص بالشاشات التي عرضها أقل من 480Px.
- CSS FOR Max WIDTH 320Px -> الـCSS الخاص بالشاشات التي عرضها أقل من 320Px.