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

محمد رحمة

السبت، 11 أبريل 2020

لغات البرمجة

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

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

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

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

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

شرح width-width & max-min  

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

 code-box@media (min-width: 600px)

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

 code-box@media (max-width: 600px)

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

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

وهذا موقع Screen Sizes لمعرفة جميع أحجام الاجهزة والشاشات , خاصية الميديا كويري خاصية رائعة ويجب تعلمها لجعل الصفحة او الموقع متجاوب مع الشاشات اتمني ان يكون الموضوع مفيد، ان واجهتك اي مشكلة في هذا الموضوع او مشكلة عامة في موقعك قم بكتابتها في صفحة الاستشارة المجانية او في اي موضوع وسيقوم بالرد عليك من احد فريق الموقع او مني , او اذا كنت تريد شرح معين عن  أي شي في بلوجر او SEO لاتتردد في كتابته في التعليقات.