بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
media screen : ويتم استخدامها من أجل تخصيص شاشة معينة بتصميم يظهر فقط عندما يفتح المحتوى على هذه الشاشة.
media print : وتستخدم من أجل عمل تصميم خاص من أجل الطباعة ، فتحدد المحتوى الذي ترى أنه كافي من أجل الطباعة وتخفي بقية المحتوى ويمكنك تغيير الألوان أيضا .
وفي درسنا اليوم سنشرح media screen ، والخطوة الأولى تبدأ بمعرفة أبعاد الشاشات الأكثر انتشارا ، وفي الغالب يرجع الأمر إلى العميل في اختيار الشاشات التي يود تغطيتها ، ولتحديد الشاشة المستهدفة نستخدم الخاصيتين min-width و max-width .
أما طريقة تحديد الشاشات واستهدافها فتختلف من مصمم إلى آخر ، وإن شاء الله في الدروس العملية سنشتغل بأكثر من طريقة ، نحن لا نزال في طور تعلم الأساسيات وبالتالي أقترح عليكم هذا التقسيم الذي يغطي أغلب الشاشات:
أداة مساعدة على التصميم المتوافق مع الشاشات
في متصفح الفايرفوكس توجد أداة جميلة جدا للمصممين ، يمكنهم بواسطتها تجريب تصميماتهم على أكثر من شاشة ولو كانت أبعادها أكبر من شاشات الأجهزة التي يشتغلون عليها.
يمكنك فتح المتصفح والذهاب إلى outils ثم إلى developpement web ثم vue adaptative ، ويمكنك الوصول إليها اختصارا بالضغط على المفاتيح control + shift + m ، ومن الأفضل أن تكون تتوفر على آخر إضدار من المتصفح.
ستحصل على هذه الواجهة حيث يمكنك كتابة أبعاد الشاشة التي تريد.
التطبيق العملي
لتطبيق التوافق مع الشاشات هناك طريقتان:
الطريقة الأولى:
نضع أبعاد الشاشة المستهدفة داخل علامة link كقيمة للخاصية media ونشير في href إلى ملف جديد مستقل عن الملف العام سيشتغل فقط عندما تكون أبعاد الشاشة هي الأبعاد المستهدفة في العلامة link .
ليكن كود html التالي:
التنسيق العام موجود في ملف style.css :
وهذه هي النتيجة :
في الملف الثاني creen-lg.css حددنا أبعاد الشاشة بين العرض الأدنى 1200px والعرض الأقصى 1360px ، وسنغير فقط لون الخلفية من الأحمر إلى الأخضر ،وهذا هو الكود:
وهذه هي النتيجة عندما تكون الأبعاد كما حددناها:
كما ترى عند العرض 1200px تغير لون الخلفية.
الطريقة الثانية:
استخدام الخاصية media screen@ وتحديد الشاشة المستهدفة وذلك في نفس ملف css أو ملف مستقل كما تشاء.
ليكن كود html التالي:
سنجعل هذه القائمة أفقية وسنخفي العنصر h3 الذي سيظهر فقط عندما تكون الشاشة شاشة موبايل مع إعادة القائمة عمودية كما كانت وإخفائها بحيث تظهر بتأثير hover عندما نمرر مؤشر الفأرة فوق العنصر h3 ، وهذا هو التنسيق :
النتيجة على كل الشاشات عدا الموبايل:
النتيجة على شاشة الموبايل:
طبعا القائمة لا تظهر ولكن مع تمرير مؤشر الماوس على العنصر h3 تظهر القائمة بشكل عمودي ، جرب بنفسك .
في الدرس القادم سنشرح كيفية التعامل مع الإعدادات الإفتراضية للمتصفحات وسنطرح ملف css للتحميل يمكنكم الإستفادة منه من أجل عمل تصميمات متوافقة مع كل المتصفحات ، وفي انتظار ذلك دمتم في رعاية الله وحفظه.