لكي يعمل  موقعك يتجاوب ويتغير  طريقة عرضة  او هيكل تصميم حسب  للشاشة التي يعرض منها.  يعني اذا كان الزائر يشاهد موقعك من شاشة موبيل فطبيعي  عليك تعديل الموقع كي يناسب مع عرض شاشة الموبيل  وهكذا مع التابلت واﻻجهزة اﻻخري.  لهذا السبب ظهر عنصر استعلامات الميديا Media Queries في CSS  ومن خلالها تستطيع تطبيق قواعد  CSS  لكل حجم شاشة مختلف من شاشة المتصفح.

تعال نجعل موقعنا  يتجاوب (يستجيب)  لمقاس عرض شاشة المتصفح اذا كان عرضها اكبر من 600 نقطة تعرض القائمة رأسيا واذا كانت اصغر من  600 نقطة يعرض الموقع كعمود واحد والقائمة افقيا، هيا بنا:

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}
استعلامات الميديا Media Queries في CSS
استعلامات الميديا Media Queries في CSS

هنيئا لك اﻵن تصميم موقعك يبدو رائعا علي متصفح الموبيل، هنا روابط بعض المواقع التي تستخدم استعلامات الميديا بهذة الطريقة. هنا الكثير لتكتشفة غير كلا من min-width و max-width قم بالرجوع الي توثيق MDN للمزيد.

المزيد عن استعلامات الميديا Media Queries في CSS

بأمكان تطوير تصميم موقعك لتناسب مع الهواتف النقالة بشكل ممتاز باستخدام Meta viewport .

رابط مختصر : https://www.aqwce.com/Ok3bf