تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: استخدم التصميم المتجاوب مع استعلامات الوسائط


الصفحة السابقة

هل تعرف ما هو الشاغل الأول لمصممي المواقع الذين ينفذون تصميم موقعهم؟ دقة شاشة زوارهم. نعم: اعتمادًا على الشاشات ، توجد مساحة أكثر أو أقل ، أو عرض شاشة أكثر أو أقل.

هذه المعلومات مهمة عند إنشاء التصميم: كيف ينبغي أن يتم عرض موقعك على أساس دقة الشاشة المختلفة؟ إذا كانت لديك شاشة عريضة ، فقد تنسى أن بعض الأشخاص يتنقلون عبر شاشات أصغر. وأنا لا أتحدث إليكم حتى عن متصفحات الهواتف الذكية ، وهي أصغر.

هذا هو المكان الذي تدخل فيه استعلامات الوسائط ، فهذه هي القواعد الواجب تطبيقها لتغيير تصميم الموقع وفقًا لخصائص الشاشة!باستخدام هذه التقنية ، يمكننا إنشاء تصميم يتكيف تلقائيًا مع شاشة كل زائر!

إنشاء استفسارات وسائل الإعلام


استعلامات الوسائط هي من بين ميزات CSS3 الجديدة. هذه ليست خصائص جديدة ولكن القواعد التي يمكن تطبيقها في ظل ظروف معينة.بشكل ملموس ، ستكون قادرًا على قول "إذا كانت دقة شاشة الزائر أقل من هذا ، فطبق خصائص CSS التالية". يسمح لك هذا بتغيير مظهر الموقع في ظل ظروف معينة: يمكنك زيادة حجم النص ، وتغيير لون الخلفية ، ووضع قائمتك بشكل مختلف في دقة معينة ، إلخ.

على عكس ما قد يفكر فيه المرء ، لا تتعلق استعلامات الوسائط بقرارات الشاشة فقط. يمكنك تغيير مظهر موقعك وفقًا لمعايير أخرى مثل نوع الشاشة (الهاتف الذكي ، التلفزيون ، جهاز الإسقاط ...) ، عدد الألوان ، اتجاه الشاشة (صورة أو منظر أفقي) ، إلخ. الاحتمالات عديدة جدا!

قم بتطبيق استعلام وسائط

استعلامات الوسائط هي قواعد تشير إلى متى يتم تطبيق خصائص CSS . هناك طريقتان لاستخدامها:

  • عن طريق تحميل ملف .cssمختلفة وفقًا للقاعدة (على سبيل المثال: "إذا كانت الدقة أقل من 1280 بكسل ، فقم بتحميل الملف small_resolution.css") ؛
  • عن طريق كتابة القاعدة مباشرة في الملف .cssالمعتاد ) على سبيل المثال: "إذا كانت الدقة أقل من 1280 بكسل ، فقم بتحميل خصائص CSS أدناه(
تحميل ملف CSS مختلف
هل تتذكر العلامة <link />التي تسمح لنا بتحميل ملف في كود HTML الخاص بنا .css ؟

<link rel="stylesheet" href="style.css" />                     

يمكننا إضافة سمة media ، نكتب فيها القاعدة التي يجب أن تنطبق على الملف المراد تحميله. نقول إننا نجعل " استعلام وسائط" media query) باللغة الإنجليزية( هذا مثال :


<link rel="stylesheet" media="screen and (max-width: 1280px)" href="small_resolution.css" />                   

في النهاية ، يمكن أن يقدم ملف HTML الخاص بك عدة ملفات CSS واحد تلقائيا (يتم تحميله في جميع الحالات) وواحد أو اثنين آخرين سيتم تحميلهما إضافيًا فقط في حالة تطبيق القاعدة المقابلة.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" /> <!--لكل المستخدمين   -->
        <link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" /> <!-- بالنسبة لأولئك الذين لديهم دقة أقل من 1280 بكسل-->
        <title>Media queries</title>
    </head>                 
تحميل القواعد مباشرة في ورقة الأنماط

هناك طريقة أخرى ، والتي أفضلها شخصيًا لأسباب عملية ، وهي كتابة هذه القواعد في ملف CSS نفسه كالمعتاد. في هذه الحالة ، نكتب القاعدة في الملف .css كما يلي:


@media  screen and (max-width: 1280px)
{
    /* كتب خصائص CSS الخاصة بك هنا */
}                 

القواعد المتاحة


هناك العديد من القواعد لبناء استعلامات الوسائط. فيما يلي أهمها:

  • color : إدارة الألوان (بت / بكسل).
  • Height : ارتفاع منطقة العرض (نافذة).
  • Width : عرض منطقة العرض (نافذة).
  • device-height : ارتفاع الجهاز.
  • device-width : عرض الجهاز.
  • Orientation : اتجاه الجهاز (عمودي أو أفقي).
  • Media : نوع من شاشة الإخراج. بعض القيم المحتملة:
    • Screen : الشاشة الكلاسيكية؛
    • Handheld : الجهاز المحمول ؛
    • Print : الطباعة ؛
    • Tv : التلفزيون ؛
    • Projection : العارض.
    • All : جميع أنواع الشاشة.
يمكننا إضافة البادئة min- أو max- أمام معظم هذه القواعد. وبالتالي ، min-width يعني "الحد الأدنى للعرض" ، max-height "الحد الأقصى للارتفاع" ، إلخ. الفرق بين width و device-width تظهر خاصة على المتصفحات على الهواتف الذكية، وسوف نتحدث عنها لاحقا.

يمكن دمج القواعد باستخدام الكلمات التالية:

  • Only : "فقط" ؛
  • And : "و" ؛
  • Not : "لا"

فيما يلي بعض أمثلة استعلامات الوسائط لمساعدتك في فهم المبدأ.


/* على الشاشات ، عندما يكون عرض النافذة هو 1280 بكسل كحد أقصى */
@media  screen and (max-width: 1280px)

/* في جميع أنواع الشاشة ، عندما يكون عرض النافذة بين 1024 بكسل و 1280 بكسل*/
@media  all and (min-width: 1024px) and (max-width: 1280px)

/* على أجهزة التلفاز */
@media  tv

/* على جميع أنواع الشاشات الموجهة عموديا */
@media  all and (orientation: portrait)                 
اختبار استعلامات الوسائط

تُستخدم استعلامات الوسائط بشكل أساسي لتكييف تصميم الموقع مع شاشات عرض مختلفة.

لنقم باختبار بسيط: سنقوم بتغيير لون وحجم النص إذا كانت النافذة أكثر أو أقل من 1024 بكسل. بالنسبة لهذا الاختبار ، سأستخدم الطريقة الثانية لكتابة القاعدة مباشرة في نفس الملف .cssكالمعتاد:


/* الفقرات باللون الأزرق بشكل تلقائي */
p
{
    color: blue;
}

/* قواعد جديدة إذا كانت النافذة بعرض 1024 بكسل على الأكثر */
@media  screen and (max-width: 1024px)
{
    p
    {
        color: red; 
        background-color: black;
        font-size: 1.2em;
    }
}                 

في ملف CSS الخاص بنا ، طلبنا أولاً كتابة نص الفقرات باللون الأزرق ، ولم يعد أي شيء جديدًا حتى الآن. من ناحية أخرى ، أضفنا استعلام وسائط ينطبق على جميع الشاشات التي لا يتجاوز عرضها 1024 بكسل. في الداخل ، طبقنا قواعد CSS على الفقرات لكتابتها بشكل أكبر وباللون الأحمر.

النتيجة: الصفحة ليس لها نفس المظهر حسب حجم النافذة (الشكل التالي)! حاول تغيير حجمها لترى!

css responsive css responsive

يتغير مظهر النص وفقًا لحجم النافذة

وضع ممارسات تصميم وسائل الإعلام موضع التنفيذ


حسنًا ، غيِّر لون النص ، إنه لطيف جدًا ولكنه لا يجلب الكثير. من ناحية أخرى ، يصبح الأمر أكثر إثارة للاهتمام عندما نستخدم استعلامات الوسائط لتعديل مظهر موقع وفقًا لدقة شاشة المستخدم. سترى أنه يمكننا أن نفعل أي شيء نريده!

بالنسبة لهذا المثال ، أقترح عليك استخدام التصميم الذي أنشأناه لموقع Zozor على الويب (الشكل أدناه).

css responsive

الموقع مناسب تمامًا لمعظم دقة الشاشة ، ولكن عندما تكون الشاشة أصغر من 1024 بكسل ، يصبح من الضروري "scroller" إلى اليمين لرؤية الصفحة بأكملها. الموقع ليس ملائمًا جدًا للعرض على شاشة صغيرة.

أقترح عليك استخدام استعلامات الوسائط لتغيير مظهر الموقع بدقة أقل من 1024 بكسل. سنقوم بإجراء التغييرات التالية:

  • سيتم ترتيب قائمة التنقل في الجزء العلوي الأيمن في الارتفاع بدلاً من العرض ، وسيتم كتابة الروابط بحجم أصغر ؛
  • ستتم إزالة اللافتة المزودة بجسر سان فرانسيسكو ( البوابة الذهبية ) لأنها تشغل مساحة كبيرة ولا تجلب الكثير من المعلومات ؛
  • <aside>سيتم وضع كتلة "À propos de l'auteur" تحت المقالة (وليس بجانبها) ، وسيتم إعادة تنظيم محتواها (سيتم تعويم صورة Zozor ) .

يمكننا بالطبع إجراء العديد من التغييرات الأخرى: تغيير اللون ، تخطيط تذييل الصفحة ، إلخ. ولكن هذا سيكون كافياً بالنسبة لنا للتدرب مع استفسارات وسائل الإعلام.

سنعمل مباشرة داخل الملف style.css الذي قمنا به خلال TP. سنضيف بعض استعلامات الوسائط لتكييف التصميم. أدعوك لتنزيل ملفات TP إذا لم يكن لديك بالفعل.

قم بتنزيل TP

الصفحة

في الوقت الحالي ، يتم تحديد عرض الصفحة عند 900 بكسل ويتم توسيط المحتوى:


#bloc_page
{
    width: 900px;
    margin: auto;
}                

باتباع هذه السطور ، أقترح إضافة قاعدة استعلام الوسائط التالية:


@media  all and (max-width: 1024px)
{
    #bloc_page
    {
        width: auto;
    }
}           

تعني القاعدة: "بالنسبة لجميع أنواع الشاشات ، إذا كان عرض النافذة لا يتجاوز 1024 بكسل ، فقم بتشغيل قواعد CSS التالية."

قواعد CSS موضوع البحث بسيطة للغاية ، فهناك قاعدة واحدة فقط: نعطي عرضًا تلقائيًا للصفحة (بدلاً من عرض ثابت قدره 900 بكسل).سوف تأخذ الصفحة بعد ذلك كل المساحة المتاحة في النافذة. هذا يتجنب ظهور أشرطة التمرير الأفقية على دقة صغيرة.

autoهي القيمة التلقائية للخاصية width . تلقائيا ، يكون للكتل عرض تلقائي (تشغل كل المساحة المتاحة). هذه القيمة "تحل محل" القيمة التي فرضناها على ارتفاع 900px ببضعة أسطر: لذلك نعود إلى السلوك التلقائي للكتلة.

قائمة التنقل

نريد أن تشغل قائمة التنقل مساحة أقل على دقة أصغر. بدلاً من إعطائها بعدًا ثابتًا ، سنعيدها تلقائيًا بعدها المرن الأصلي. سيتم كتابة كل عنصر من عناصر القائمة أسفل العنصر السابق: لذلك ، نطلب تنظيم عناصر Flexbox في العمود.

أخيرًا ، سيتم كتابة النص بشكل أصغر وسنقوم بإزالة الحدود أسفل الروابط عند تحليق مؤشر الماوس فوقه ، لأنه أقل ملاءمة لهذا الشكل.


@media  all and (max-width: 1024px)
{
    nav
    {
        width: auto;
        text-align: left;
    }
    
    nav ul
    {
        flex-direction: column;
    }

    nav li
    {
        padding-left: 4px;
    }
    
    nav a
    {
        font-size: 1.1em;
    }
    
    nav a:hover
    {
        border-bottom: 0;
    }
}
اللافتة

لإزالة الشعار ، لا يوجد شيء أكثر بساطة: نستخدم الخاصية display التي نخصص لها القيمة none . إذا كانت النافذة صغيرة جدًا ، نفضل إخفاء الشعار تمامًا:


@media  all and (max-width: 1024px)
{
    #banniere_image
    {
        display: none;
    }
}
كتلة "A PROPOS DE L’AUTEUR "

بدلاً من وضع هذه الكتلة على يمين المقالة ، سننقلها أدناه باستخدام مربعات الأعمدة المرنة. هذا النوع من الترتيب "للأعلى والأسفل" مناسب أكثر للشاشات الصغيرة. داخل الكتلة ، نقوم بإعادة ضبط موضع العناصر: سيتم وضع صورة Zozor ، على وجه الخصوص ، عائمة يمينًا.


@media  all and (max-width: 1024px)
{
    section
    {
        flex-direction: column;
    }

    article, aside
    {
        width: auto;
        margin-bottom: 15px;
    }
    
    #fleche_bulle
    {
        display: none;
    }
    
    #photo_zozor img
    {
        width: 110px;
        float: right;
        margin-left: 15px;
    }
    
    aside p:last-child
    {
        text-align: center;
    }
}

ماذا يعني ذلك aside p:last-child؟

إنه محدد متقدم لم نستخدمه حتى الآن. aside p يعني "جميع الفقرات داخل العلامة " <aside> . باستخدام :last-child، نستهدف فقط الفقرة الأخيرة في الكتلة ) aside تلك التي تحتوي على روابط إلى Facebook و (Twitter ، لتتمكن من توسيط الصور. بالطبع، يمكننا أيضا إضافة class أو id لهذه الفقرة لاستهدافها مباشرة، ولكن لم أكن أريد ان اغير في الكود HTML .
النتيجة
css responsive

نفس الموقع ، قدم بشكل مختلف اعتمادا على عرض الشاشة

استعلامات الوسائط ومتصفحات الجوال


كما تعلم ، فإن شاشات الهواتف الذكية أصغر بكثير من شاشاتنا المعتادة (فقط بضع مئات من وحدات البكسل). للتكيف ، تعرض متصفحات الجوال الموقع من خلال "إلغاء التكبير / التصغير" ، الذي يوفر نظرة عامة على الصفحة بأكملها. تسمى منطقة العرض المحاكية بـviewport : هذا هو عرض نافذة المتصفح على الهاتف المحمول.

في CSS ، مع استعلامات الوسائط ، إذا قمت باستهداف الشاشة ب max-width ، فسوف يقارن العرض الذي تشير إليه بعرض منفذ العرض الخاص به. المشكلة هي أن viewport يتغير اعتمادا على متصفح المحمول المستخدم!

css responsive

يتصرف iPhone كما لو كانت النافذة بعرض 980 بكسل ، بينما يتصرف Android كما لو كانت النافذة 800 بكسل!

لاستهداف الهواتف الذكية ، بدلاً من الاستخدام max-width، قد يكون من المثير للاهتمام اللجوء إلى

max-device-width : أي عرض الجهاز. أجهزة الجوال التي يصل عرضها إلى 480 بكسل ، يمكننا استهداف متصفحاتها الجوال باستخدام استعلام الوسائط هذا:


@media  all and (max-device-width: 480px)
{
    /* قواعد CSS للهواتف المحمولة هنا */
}

لماذا لا نستهدف الهواتف المحمولة مع وسائل handheld؟

أراك تتبع ، جيد جدا! في الواقع ، يمكننا (نظريًا) استهداف شاشات الجوّال باستخدام الوسائط handheld... لسوء الحظ ، لم يتعرف متصفح الجوال إلى جانب Opera Mobile handheld. كلهم يتصرفون كما لو كانوا شاشات عادية ( screen). لذلك لا يمكننا استخدام حقا handheldلاستهداف الهواتف المحمولة.

يمكنك تغيير عرض منفذ العرض لمستعرض الجوال باستخدام علامة meta لإدراجها في رأس ( <head>) المستند:

<meta name="viewport" content="width=320" /> 

يمكنك استخدام هذه العلامة لتغيير كيفية تنظيم محتوى صفحتك على الأجهزة المحمولة. للحصول على تجسيد سهل القراءة ، بدون تكبير ، يمكنك الحصول على منفذ العرض بنفس عرض الشاشة:


<meta name="viewport" content="width=device-width" />

الخلاصة


  • تتيح لك استعلامات الوسائط تحميل أنماط CSS مختلفة وفقًا لمعايير معينة.
  • المعلمات المسموح بها في استعلامات الوسائط كثيرة: عدد الألوان ودقة الشاشة والاتجاه ... في الممارسة العملية ، يتم استخدامه في المقام الأول لتغيير مظهر الموقع وفقًا لدرجات دقة الشاشة المختلفة.
  • يتم إنشاء استعلام وسائط بتوجيه @media يتبعه نوع الشاشة وشرط واحد أو أكثر (مثل الحد الأقصى لعرض الشاشة). لن يتم تمكين نمط CSS التالي إلا إذا تم استيفاء الشروط.
  • تحاكي متصفحات الجوّال عرض شاشة: يُطلق عليها اسم VIEWPORT .
  • نحن يمكن أن نستهدف الهواتف الذكية من خلال قاعدة على أساس العدد الفعلي للبكسل المعروضة على الشاشة: max-device-width.