كيفية استخدام Media query على الأحجام الصغيرة والكبيرة؟

يمكن استخدام الأكواد التالية لتغيير خصائص العرض في الأجهزة المختلفة:-

/* للأجهزة التي عرضها أكبر من 768 بكسل */
@media (min-width: 768px) {
  body {
    background-color: yellow;
  }
}

/* للأجهزة التي عرضها أصغر من 768 بكسل */
@media (max-width: 767px) {
  body {
    background-color: red;
  }
}

هذه الأكواد تعمل بشكل جيد في كلاً من Sublime Text و Visual Studio Code. يجب التأكد من كتابة الشروط بشكل صحيح مثل min-width أو max-width وعدم استخدام only و screen معًا. الأكواد المعروضة هي طريقة حديثة وفعالة لتحديد خصائص العرض في الأجهزة المختلفة.

كما أن هذه @media الخاصة في إطار عمل Bootstrap وكيفية استخدامها على مختلف الشاشات.

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

@media only screen and ( min-wigth 600px){background-color: Ex red } 

تشير الكلمة الأساسية screen إلى أنه جهاز كمبيوتر أو هاتف محمول أو جهاز لوحي وما إلى ذلك. هناك نوعان آخران من الوسائط ، الطباعة والكلام ، بالإضافة إلى الافتراضي الكل.

لذلك عند استخدام media only screen and كما في الكود السابق يعني أنك تستهدف فقط شاشات مثل أجهزة سطح المكتب والكمبيوتر المحمول والكمبيوتر اللوحي والجوال وما إلى ذلك ، وليس أجهزة الوسائط الأخرى مثل وسائط الطباعة وقارئات الشاشة وما إلى ذلك.

لذلك يمكنك حذف ال only screen and واستخدام الكود كما في التعليق السابق بدون مشاكل 

كما أن الأكواد التي كتبتها يجب أن تعمل أيضاً في ال Sublime text و ال visual studio code حيث أنهما محررات أكواد وليس لهما تأثير على الكود 

لذلك ربما كتبت الكود بشكل غير صحيح في ال visual studio code

باستطاعتك استخدام Media Query لتعديل تصميم الموقع على أساس حجم الشاشة،  من خلال استخدام الـ Media Query في CSS لتحديد قيم خاصة بأحجام الشاشات الصغيرة والكبيرة.

ولكي تستخدم Media Query في الـ CSS بشكل صحيح، يجب كتابة الشروط بشكل صحيح. أي يجب كتابة الشروط بشكل محدد لكل حجم شاشة بعينه، وذلك باستخدام @media وعبارة (min-width: أو max-width)، ومن ثم وضع القواعد الخاصة بالحجم المعين.

عليك باستخدام الكود التالي كأسلوب عام:

/* للحجم الصغير */
@media only screen and (max-width: 600px) {
   /* القواعد الخاصة بالحجم الصغير هنا */
}

/* للحجم المتوسط */
@media only screen and (min-width: 601px) and (max-width: 900px) {
   /* القواعد الخاصة بالحجم المتوسط هنا */
}

/* للحجم الكبير */
@media only screen and (min-width: 901px) {
   /* القواعد الخاصة بالحجم الكبير هنا */
}

بالنسبة للأخطاء المذكورة في Visual Studio Code، من الممكن أن يكون الخطأ يتعلق بطريقة كتابة الأكواد، لذلك يجب التأكد من كتابة الأكواد بشكل صحيح وتحديد الأحجام الصحيحة.

بالنسبة للفرق بين استخدام Sublime text و Visual Studio Code، فلا يوجد فرق يذكر، حيث يتم استخدام نفس الأساليب في الكتابة في كلا البرنامجين.

وأخيراً، لا يوجد شيء مثل "طريقة قديمة" في استخدام Media Query، فإنها ميزة تم إدخالها في CSS3 وما زالت تستخدم حتى الآن.

وسأشرح لك المزيد من المعلومات والأمثلة بالكود عن كيفية استخدام Media Query في CSS:

1- استخدام Media Query لتعديل العرض:

/* للأجهزة التي يكون عرضها أكبر من 768 بكسل */
@media only screen and (min-width: 768px) {
    body {
        width: 80%;
    }
}

/* للأجهزة التي يكون عرضها أصغر من 768 بكسل */
@media only screen and (max-width: 767px) {
    body {
        width: 100%;
    }
}

2- استخدام Media Query لتعديل خصائص الخط:

/* للأجهزة التي يكون عرضها أكبر من 600 بكسل */
@media only screen and (min-width: 600px) {
    body {
        font-size: 18px;
    }
}

/* للأجهزة التي يكون عرضها أصغر من 600 بكسل */
@media only screen and (max-width: 599px) {
    body {
        font-size: 16px;
    }
}

3- استخدام Media Query لتعديل الألوان:

/* للأجهزة التي يكون عرضها أكبر من 768 بكسل */
@media only screen and (min-width: 768px) {
    body {
        background-color: #f5f5f5;
    }
}

/* للأجهزة التي يكون عرضها أصغر من 768 بكسل */
@media only screen and (max-width: 767px) {
    body {
        background-color: #fff;
    }
}

4- استخدام Media Query لتعديل العرض والارتفاع:

/* للأجهزة التي يكون عرضها أكبر من 768 بكسل */
@media only screen and (min-width: 768px) {
    .container {
        width: 800px;
        height: 600px;
    }
}

/* للأجهزة التي يكون عرضها أصغر من 768 بكسل */
@media only screen and (max-width: 767px) {
    .container {
        width: 100%;
        height: auto;
    }
}

هذه بعض الأمثلة على كيفية استخدام Media Query في CSS لتعديل تصميم الموقع بناءً على حجم الشاشة. يمكن تعديل هذه الأمثلة وفقًا لاحتياجات الموقع الخاص بك.

من الواضح أنك تريد كتابة كود CSS لتغيير لون الخلفية حسب عرض الشاشة. هذا يسمى التصميم المتجاوب أو Responsive Design.

لكن يبدو أن هناك خطأ في كودك الحالي.

أولاً، عليك استخدام min-width بدلاً من min-wigth.

ثانياً، عليك إغلاق القوس المفتوح بعد كل قاعدة.

ثالثاً، عليك تحديد العنصر الذي تريد تغيير لون خلفيته، مثلاً body أو div.

رابعاً، عليك استخدام # أو rgb أو rgba لتحديد الألوان بدلاً من Ex.

خامساً، عليك ترتيب القواعد حسب تنازلي العرض، أي من الأكبر إلى الأصغر. سادساً، لا يهم إذا كتبت only أو and في Visual Studio Code، فهذه كلمات اختيارية ولا تؤثر على النتيجة.

إذن، كود CSS صحيح قد يبدو مثل هذا:

للتحكم في العرض بين الموبايل والتابلت والويندوز باستخدام CSS media queries يجب استخدام الأكواد التالية:

/* للموبايل */
@media only screen 
  and (min-width: 320px) 
  and (max-width: 480px) {
    /*  الخصائص هنا */
}

/* للتابلت */
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px) {
    /*  الخصائص هنا */
}

/* للويندوز */
@media only screen 
  and (min-width: 1025px) {
    /*  الخصائص هنا */
}

وتحديد الخصائص التي تريد تغييرها لكل قياس، مثلاً:

/* للموبايل */
@media only screen 
  and (min-width: 320px) 
  and (max-width: 480px) {
    body {
      background-color: red;
    }
}

/* للتابلت */
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px) {
    body {
      background-color: yellow;
    }
}

/* للويندوز */
@media only screen 
  and (min-width: 1025px) {
    body {
      background-color: blue;
    }
}

أما بالنسبة لسؤالك عن اختلافات الطرق، فهذه مسألة تطور وتحديث لغة CSS. في الماضي، كانت هناك طرق قديمة لكتابة التصميم المتجاوب، مثل استخدام @import أو device-width. لكن هذه الطرق لم تعد مستحسنة أو مدعومة من قبل المتصفحات. لذلك، يجب عليك دائماً اتباع المعايير الحديثة والمستندة إلى min-width و max-width.

و يمكنك التعمق أكثر من خلال توثيق CSS الموجود في موسوعة حسوب:  القاعدة ‎@media - موسوعة حسوب (hsoub.com)