الدرس الأول // أساسيات استخدام استعلامات الوسائط Media Queries CSS لإنشاء إصدار الجوال الخاص بموقعك .

إذا كنت قد أنشأت ورقة أنماط CSS لموقع ويب ، فقطعا ستكون على دراية بفكرة إنشاء ورقة أنماط معينة ليتم تشغيلها في ظل ظروف معينة مثل خاصية استعلامات الوسائط ومن المستحيل حصرها نظرا للإمكانيات التي يجلبها CSS3 .. لذلك سنبدأ بالمستوى الإبتدائي في هذا البرنامج التعليمي لنعرف أسس تقنية تستخدم جزءًا من CSS3 غير مدعومة بواسطة Internet Explorer 8 وهي ببساطة القاعدة media لجعل مدونتك متجاوبة مع شاشات العرض في الأجهزة اللوحية و الهواتف الذكية مثل ipad / iphon / galaxy..الخ أو لتنسيق صفحة الموضوع لتصبح جاهزة للطباعة print .
للعلم أنه تم تمكين هذه الوظيفة في CSS2 لتسمح لك بتحديد نوع الوسائط المراد إستهدافها ، بحيث يمكنك استهداف الطباعة والمحمول وما إلى ذلك.

التعريف والاستخدام

تُستخدم @media في استعلامات الوسائط لتطبيق أنماط مختلفة لأنواع / أجهزة وسائط مختلفة.
يمكن استخدام استعلامات الوسائط للتحقق من العديد من الأشياء ، مثل:

إستخدام استعلامات الوسائط
عرض وطول إطار العرض
العرض والطول من الجهاز
الاتجاه (هل الجهاز اللوحي / الهاتف في الوضع الأفقي أو العمودي؟)
القرار

يعد استخدام استعلامات الوسائط تقنية شائعة لتقديم ورقة أنماط مخصصة (تصميم ويب سريع الاستجابة) إلى أجهزة سطح المكتب وأجهزة الكمبيوتر المحمولة والأجهزة اللوحية والهواتف المحمولة.
يمكنك أيضًا استخدام استعلامات الوسائط لتحديد أنماط معينة فقط للمستندات المطبوعة أو لقارئات الشاشة (mediatype: print، screen، or speech).
بالإضافة إلى أنواع الوسائط ، هناك أيضًا ميزات توفر تفاصيل أكثر تحديدًا لاستعلامات الوسائط ، وذلك عن طريق السماح باختبار ميزة معينة على سبيل المثال ، يمكنك تطبيق الأنماط على الشاشات فقط التي تكون أكبر أو أصغر من عرض معين.

دعم المتصفح

تحدد الأرقام في الجدول أول إصدار متصفح يدعم القاعدة media بالكامل.

9+IE
21+Chrome
3.5+Firefox
4.0+Safari
9+Opera
all Browser
2.2+android
all touch

البنية الأساسية

الكود التالي مجرد مثال للتوضيح لايصلح فعليا كنمط معتمد.

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
    /* هنا مكان وضع الأنماط */
}

شرح الخواص و الكلمات الشرطية

الخاصية mediatype المحددة بهذا اللون تعني نوع الوسائط يوضع مكانها مثلا screen لإستهداف الجوال

الخاصية mediafeature المحددة بهذا اللون تعني ميزة الوسائط يوضع مكانها مثلا max-width لإستهداف أقصى عرض لنافذة الجوال

الشرط not المحدد بهذا اللون يمنع المتصفحات من تطبيق الأنماط المحددة..نادرا مانستخدمه

الشرط only المحدد بهذا اللون يمنع المتصفحات القديمة التي لا تدعم استعلامات الوسائط بميزات الوسائط من تطبيق الأنماط المحددة. ليس له أي تأثير على المتصفحات الحديثة.

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

الشرط or المحدد بهذا اللون بديل بين ميزة الوسائط وأخرى..نادر الإستخدام لكنه مفيد في تجنب التكرار

تهيئة قالب المدونة للتجاوب مع شاشات العرض المختلفة

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى - في تهيئة القالب

قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على أيقونة تخصيص مظهر الجوال
ستنبثق لك نافذة إختر >> لا إظهار مظهر سطح المكتب على أجهزة الجوال.>> ثمحفظ

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية - في تهيئة القالب

من نفس صفحة المظهر >> إضغط على تحرير Edit HTML
إضغط في وسط محرر الأكواد ثم F + Ctrl لإضهار مربع البحث
بإستعمال الزر C +Ctrl للنسخ و V +Ctrl للصق قم بوضع الأكواد في المكان المناسب
قم بالبحث عن هذا الوسم <head> أسفله أي بعده قم بوضع علامة كود.html التالي..

CSS
     <!-- device Mobile -->
    <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

ملاحظة:

في حال أننا لانريد جعل المدونة متجاوبة أي عرض الموقع بالشكل الكامل على الأجهزة الذكية وكأنك تتصفح المدونة من سطح المكتب هنا لانحتاج إلى أكواد css فقط نقوم بوضع السطر التالي..بدلا من الأول ولاداعي أن تكمل الموضوع.


    <meta expr:content='data:blog.isMobile         ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot;         : &quot;width=1100&quot;' name='viewport'/>

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثالثة - في تهيئة القالب

قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع التوليفة كود.css التالية..

CSS
/* Page Responsive */
@media screen and (max-width:1600px) {}/*kindle fire HDX*/
@media screen and (max-width:1440px) {}/*laptop with HiDPI screen*/
@media screen and (max-width:1280px) {}/*laptop with MDPI screen + laptop with TOUCH*/
@media screen and (max-width:1024px) {}/*ipad pro*/
@media screen and (max-width:992px) {}
@media screen and (max-width:800px) {}/*nexus10 */
@media screen and (max-width:775px) {}
@media screen and (max-width:768px) {}/*ipad + ipad mini*/
@media screen and (max-width:640px) {}/*Microsoft lumia550*/
@media screen and (max-width:600px) {}/*blackberry playbook + nexus7*/
@media screen and (max-width:480px) {}/*st*/
@media screen and (max-width:414px) {}/*iphon 6plus*/
@media screen and (max-width:412px) {}/*nexus6+ nexus6p + nexus5x*/
@media screen and (max-width:384px) {}/*nexus 4 + LG optimus L70*/
@media screen and (max-width:375px) {}/*iphon 6*/
@media screen and (max-width:360px) {}/*galaxy s5/s3/note2/note3 + nok n9 + nexus5 + Microsoft lumia950 + blackberry z30*/
@media screen and (max-width:320px) {}/* iphon 4/5 + nok lumia 520 */

ملاحظة:

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

CSS
@media screen and (max-width:320px) {هنا مكان وضع الأنماط}/* iphon 4/5 + nok lumia 520 */

شرح الخواص

ميزة الوسيط max-width:320px المحددة بهذا اللون تقول أي إستهداف الأجهزة التي لها أقصى عرض 320px

الوصف /* iphon 4/5 + nok lumia 520 */ المحدد بهذا اللون يقول أن هناك جهازين iphon 4/5 و nokia lumia 520 يعرضان في إطار 320px

فقط للمعلومة ..نستطيع كذلك تغيير ميزة الوسيط من أقصى عرض max-width إلى أدق عرض min-width وذلك لعمل العكس وهنا سيتغير الترتيب فبدل النزول للأسفل سيحدث العكس أي النسبة الصغيرة ستكون فوق النسبة الكبيرة مثلا هكذا..


/* Page Responsive */
@media screen and (min-width:768px) {}/*ipad + ipad mini*/
@media screen and (min-width:1024px) {}/*ipad pro*/

ملاحظة:

هذه الطريقة تتطلب عمل كبير إذا طبقناها على قالب كامل لأن الأنماط الأساسية ستكون مخصصة منذ البداية لإستهداف الأجهزة ذات الشاشات الأصغر لذلك هي لاتستخدم إلا مع الإضافات أو المشاريع الصغيرة..فلا تستخدم هذه الطريقة لتخصيص قالب كامل لإنشاء إصدار الجوال..بل إستخدم دائما ميزة الوسيط max-width فهي أسهل ومنطقية أكثر.

تخصيص أجهزة المحكاة

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

إفتح أي صفحة على متصفح الكروم >> الأحسن إجعلها صفحة المدونة التي طبقنا عليها الأكواد السابقة .
إضغط بيمين الماوس في وسط الصفحة ثم فحص مصدر الصفحة Inspect ستجده أخر خيار عندك..أو يمكنك الضغط على زر F12
بمجرد ظهور نافذة المصدر إضغط على الأيقونة لتبديل شريط أدوات الجهاز بالشكل الآتي...

في رأس الصفحة إضغط على Responsive القائمة المنسدلة >> ثم إختر آخر إعداد Edit... بالشكل الآتي...

ستظهر لك نافذة في وسط مربع الفحص ستقوم بتحديد جميع العلامات لكي تظهر معنا الأجهزة في القائمة Responsive بالشكل الآتي...

الآن قم بإعادة فتح القائمة Responsive ولاحظ أنها أصبحت تحتوي على قائمة كاملة بالأجهزة المختلفة العروض ماعليك سوى الضغط على أي جهاز للتخصيص كما يمكنك معاينة الحدود في الشريط العلوي وكذلك تدوير الشاشة والكثير من المميزات..والجميل أنك لن تحتاج للبحث عن الأجهزة والتقنيات الجديدة لأن الأداة تقوم بذلك عوضا عنك.

خطوات التطبيق العملي

الآن قالبك أصبح مهيء لإستقبال الأكواد البديلة وعندنا وسيلة دقيقة لمحاكاة الأجهزة الذكية بأحجام عرض مختلفة ماتبقى سوى تخصيص القالب ليتجاوب مع هذه السلوكيات.
- لكن صدقني طريقة التخصيص بحر واسع يتطلب الصبر الفطنة والحيلة لتجنب التكرار وإغراق القالب في الأكواد بحيث يمكنك جعل قالب مدونتك متجاوب مع جميع الأجهزة بتوليفة لا تتعدى عشر أسطر مضغوطة .

تعليق:

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

#nav <-- 100% -->

#content-wrapper <-- 100% -->

#main <-- 850px -->

شرح للنموذج

القسم المحدد بهذا اللون هو رأس القالب <header> والمعرف الخاص به مثلا id="header-wrapper"

القسم المحدد بهذا اللون هو حقل القائمة الرئيسية <nav> والمعرف الخاص به مثلا id="nav"

القسم المحدد بهذا اللون هو حقل المحتوى المجمع <section> والمعرف الخاص به مثلا id="content-wrapper"

القسم المحدد بهذا اللون هو حقل التدوينات <main> والمعرف الخاص به مثلا id="main"

القسم المحدد بهذا اللون هو الشريط الجانبي <aside> والمعرف الخاص به مثلا id="sidebar-wrapper"

القسم المحدد بهذا اللون هو تذييل القالب <footer> والمعرف الخاص به مثلا id="footer"

التخطيط الذي مر معنا هو مايسمى بالحاويات الرئيسية -الترويسة- علينا دائما ضبطها في البداية ثم إنتقل للفروع مثل الأداوات والأزرار والعناوين وما إلى ذلك .. الطرق طبعا تختلف ولكل مصمم طريقته...منها الإحترافي ومنها الخاطأ ونحن مع بعض سنأخذ الوسط..تابع معي
هل لاحظت هذه التعليقات في جميع أقسام النموذج مثلا <-- 350px --> أسفل المتغير #main هذا نقصد به عرض الحقل ..راجع ذلك بسرعة.
عليك دائما التركيز على عرض الحاويات والأدوات إذا وجدتها بالـبكسل مثلا 350px فهي تحتاج إلى ضبطها مع الأجهزة الذكية الصغيرة أما إذا وجدتها بالنسبة المئوية 100% فأنت لاتحتاج سوى ضبط نوع الدعم support type مثل اللون color والخط font والحشو padding ...إلخ.

سأبدأ مع أقصى عرض للشاشة الصغيرة وهو max-width:1024px وهذا لإستهداف أكبر إطار نزولا إلى أصغر شاشة دون اللجوء لإعادة تكرار الأكواد وذلك من خلال علامة الوسائط التالية...

CSS
@media screen and (max-width:1024px) {}/*ipad pro*/

تذكر جيدا ..دائما نضع الأنماط الخاصة بنا داخل {}العارضة الرئيسية..ليكون العمل كالآتي...

CSS
@media screen and (max-width:1024px) {
#header-wrapper {
    height: 100px;
}

#nav {
padding: 5px;
}

#content-wrapper {
    padding: 5px;
}

#main {
    width: 100%;
    float: none;
    margin: 10px 0;
}

#sidebar-wrapper {
    width: 100%;
    float: none;
    margin: 10px 0;
}

#footer {
    padding: 5px;
}

}/*ipad pro*/

شرح التعديلات

النمط المحدد بهذا اللون خاص برأس القالب <header> لاداعي لضبط العرض لأنه متجاوب مادام بعرض 100% قمنا فقط بتقليل نسبة الطول إلى height: 100px; وذلك كي نقلل من مسافة التمرير للأسفل يمكننا وضع المزيد من الدعامات لتخصيصه بالشكل أو اللون الذي نريده.
النمط المحدد بهذا اللون خاص بحقل القائمة الرئيسية <nav> يحتوي على عرض متجاوب 100% إلا أنه غير مستقر بمعنى يمكن جعله ثابت في رأس القالب أو منزلق أضف أن الأقسام والفروع بداخله تحتاج لتخصيص تبعا لموضع الحاوية الرئيسية..ما قمنا به فقط تقليل الحشو padding: 5px; حتى نحصل على المزيد من السعة للمحتوايات.
النمط المحدد بهذا اللون خاص بحقل المحتوى المجمع <section> نفس الفكرة كونه يحتوي على عرض متجاوب 100% ولاينبغي المساس بالطول كونه حاضنة لمحتويات غير مستقرة قمنا فقط بتقليل الحشو padding: 5px; حتى نحصل على المزيد من السعة للمحتوايات.
النمط المحدد بهذا اللون خاص بحقل التدوينات <main> وهنا يحتاج منا تغيير نسبة العرض 850px إلى نسبة متجاوبة تلقائية أي 100% وهذا ماقمنا به لكي تأخذ الحاوية كامل عرض الشاشة كما أننا منعنا إتجاه الموضع وقمنا بتغيير نسبة الحافة margin: 10px 0; للحصول على بعض الضغط.
النمط المحدد بهذا اللون خاص بالشريط الجانبي <aside> طبقنا فيه نفس العمل الذي قمنا به على حقل التدوينات <main> لاحظ ذلك وركز كيف أن الأكواد هي نفسها وطبعا هذا غير مستحب.
النمط المحدد بهذا اللون خاص بتذييل القالب <footer> كذلك طبقنا فيه نفس العمل الذي قمنا به على حقل المحتوى المجمع <section> .

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

CSS
@media screen and (max-width:1024px) {
#header-wrapper {
    height: 100px;
}
#nav, #content-wrapper, #footer {
    padding: 5px;
}
#main, #sidebar-wrapper  {
    width: 100%;
    float: none;
    margin: 10px 0;
}
}/*ipad pro*/

ملاحظة:

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

كما قلت لكم هناك عدة طرق لتجنب التكرار وهذه الطريقة هي الوسط والمستحسن العمل بها أما الطريقة الإحترافية تعتمد على المعرف الثابت تسمى بنقاط التوقف سنعرفها في تدوينة مستقلة...دعنا الآن نرجع لموضوعنا لنرى كيف ستبدو التقسيمات إذا قمنا بمعاينتها على أداة المحكاة..

#nav <-- 100% -->

#content-wrapper <-- 100% -->

#main <-- 100% -->

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

الدرس الأول // أساسيات استخدام استعلامات الوسائط Media Queries CSS لإنشاء إصدار الجوال الخاص بموقعك .

التعريف والاستخدام

دعم المتصفح

البنية الأساسية

شرح الخواص و الكلمات الشرطية

تهيئة قالب المدونة للتجاوب مع شاشات العرض المختلفة

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى - في تهيئة القالب

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية - في تهيئة القالب

ملاحظة:

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثالثة - في تهيئة القالب

ملاحظة:

شرح الخواص

ملاحظة:

تخصيص أجهزة المحكاة

خطوات التطبيق العملي

تعليق:

شرح للنموذج

شرح التعديلات

ملاحظة:

تعليقات

إرسال تعليق

قد يهمك ايضا

إنشاء صفحة الإتصال على بلوجر متعددة الإستخدامات | نموذج طلب الإنضمام للمدونة

تركيب أزرار التمرير السلس أعلى أو أسفل الصفحة إلى بلوجر Go Up and Down

تركيب المكون الإضافي simpleCart (js) - أداة عربة التسوق إلى المدونة

إضافة زر إظهار وإخفاء حاوية لصندوق تعليقات بلوجر بأسهل طريقة Comment Slide Panel

أداة ستجعل من الصعب فك تشفير شفرة المصدر | JavaScript Obfuscator Tool

إضافة خاصية تقييم المحتوى على شكل نجوم بإستخدام تطبيق Firebase