شرح التحكم في عرض الشاشة بخاصية Media query

شرح التحكم في عرض الشاشة بخاصية Media query

ماهي خاصية Media query وكيفية وضعها داخل صفتحك أو مدونتك والتحكم في عرض الشاشة 

خاصية Media query هي خاصية مهمة جدا لعمل موقع متجاوب Responsive وهي خاصية من لغة CSS3

وأصبحت الان ضروريا , تقريبا لا يوجد قالب بلوجر ليس به أكواد media query لأن تجاوب الموقع امر أساسي الان وليس شي اختياري بل عكس تجاوب الموقع أصبح أمر أساسي لأي موقع يريد التصدر ، سنشرح اليوم width-width & max-min والفرق بينهم

شرح width-width & max-min  

عندما تكتب هذا الكود 

@media (min-width: 600px)

هذا الكود معناه أن حجم الشاشة 600px فيما أكثر سيتم تطبيق هذه الخصائص عليه

@media (max-width: 600px)

هذا الكود معناه أن حجم الشاشة 600px فيما أقل سيتم تطبيق هذه الخصائص عليه

ومثال علي ذلك لتوضيح شرح اليوم هذه الصورة التالية :- 

هذا الشرح وهذا الكود معناه انك أذا قم بتصغير المتصفح سيقوم بتغيير لون خلفية المحتوي للون الأخضر وعندما قمنا بصغير نافذة المتصفح كانت هذه النتيجة :- 

وهذا موقع screensiz.es لمعرفة جميع أحجام الاجهزة والشاشات , خاصية الميديا كويري خاصية رائعة ويجب تعلمها لجعل الصفحة او الموقع متجاوب مع الشاشات.