بناء الجملة لكل من استعلامات الوسائط min-width و max-width
تصميم الويب السريع الاستجابة هو طريقة لإنشاء صفحات الويب حيث يمكن لهذه الصفحات تغيير تصميمها ومظهرها ديناميكيًا استنادًا إلى حجم شاشة الزائر . يمكن للشاشات الكبيرة الحصول على تنسيق مناسب للشاشات الأكبر حجمًا ، بينما يمكن للأجهزة الأصغر حجمًا ، مثل الهواتف المحمولة ، الحصول على نفس موقع الويب المنسق بطريقة مناسبة لتلك الشاشة الأصغر. يوفر هذا الأسلوب تجربة مستخدم أفضل لجميع المستخدمين ويمكنه أيضًا المساعدة في تحسين تصنيفات محركات البحث . جزء مهم من تصميم الويب سريع الاستجابة هو CSS Media Queries.
تشبه "استعلامات الوسائط" عبارات مشروطة صغيرة داخل ملف CSS لموقعك على الويب ، مما يسمح لك بتعيين قواعد CSS معينة ستدخل فقط عند استيفاء شرط معين - مثلما يكون حجم الشاشة أعلى أو أدنى من عتبات معينة.
استعلامات الوسائط في العمل
إذا كيف تستخدم استعلامات الوسائط على موقع ويب؟ هذا مثال بسيط للغاية:
- يمكنك البدء بمستند HTML منسق بشكل جيد وخالي من أي أنماط مرئية (وهذا هو الغرض من CSS)
- في ملف CSS ، ستبدأ كما تفعل عادة عن طريق تصفّح الصفحة وتحديد خط الأساس لكيفية ظهور الموقع. لنفترض أنك تريد أن يكون حجم خط الصفحة 16 بكسل ، يمكنك كتابة هذا CSS: body {font-size: 16px؛ }
- الآن ، قد ترغب في زيادة حجم الخط للشاشات الكبيرة التي تحتوي على مساحة وافرة للقيام بذلك. هذا هو المكان الذي يتم تشغيل استعلامات الوسائط فيه. يمكنك بدء تشغيل "استعلامات الوسائط" على النحو التالي:media screen و (min-width: 1000px) {}
- هذه هي صيغة استعلام الوسائط. يبدأ بـmedia لإنشاء Media Query نفسه. المقبل قمت بتعيين "نوع وسائل الإعلام" ، والتي في هذه الحالة هي "الشاشة". ينطبق ذلك على شاشات الكمبيوتر المكتبي والأجهزة اللوحية والهواتف ، إلخ. وأخيرًا ، تقوم بإنهاء "استعلام الوسائط" باستخدام "ميزة الوسائط". في المثال أعلاه ، هذا "mid-width: 1000px". هذا يعني أن Media Query سيتم تشغيله مع شاشات عرض بعرض 1000 بكسل كحد أدنى.
- بعد هذه العناصر من Media Query ، تقوم بإضافة قوس تجويف فتح وإغلاق مشابه لما ستقوم به في أي قاعدة CSS عادية.
- تتمثل الخطوة الأخيرة في استعلام الوسائط في إضافة قواعد CSS التي تريد تطبيقها بمجرد استيفاء هذا الشرط. يمكنك إضافة قواعد CSS هذه بين الأقواس المعقوفة التي تشكل تقرير Media Query ، مثل هذا: شاشةmedia و (min-width: 1000px) {body {font-size: 20px؛ }
- عندما يتم استيفاء شروط طلب البحث عن الوسائط (تكون نافذة المتصفح بعرض 1000 بكسل على الأقل) ، يصبح نمط CSS هذا ساري المفعول ، ويغير حجم خط الموقع من 16 بكسل أنشأناها أصلاً إلى قيمنا الجديدة التي تبلغ 20 بكسل.
إضافة المزيد من الأنماط
يمكنك وضع العديد من قواعد CSS ضمن هذا الاستعلام عن الوسائط حسب الحاجة لضبط المظهر المرئي لموقع الويب الخاص بك. على سبيل المثال ، إذا كنت تريد ألا تزيد حجم الخط إلى 20 بكسل فقط ، ولكن يمكنك أيضًا تغيير لون جميع الفقرات إلى اللون الأسود (# 000000) ، فيمكنك إضافة هذا:
شاشةmedia و (min-width: 1000px) {body {font-size: 20px؛ } p {color: # 000000؛ }}إضافة المزيد من استعلامات الوسائط
بالإضافة إلى ذلك ، يمكنك إضافة المزيد من استعلامات الوسائط لكل أحجام أكبر ، وإضافتها إلى ورقة الأنماط الخاصة بك مثل:
شاشةmedia و (min-width: 1000px) {body {font-size: 20px؛ } p {color: # 000000؛ {}media screen و (min-width: 1400px) {body {font-size: 24px؛ }}سيتم تشغيل استعلامات الوسائط الأولى بحجم 1000 بكسل ، مما يؤدي إلى تغيير حجم الخط إلى 20 بكسل. بعد ذلك ، بمجرد تجاوز المستعرض 1400 بكسل ، يتغير حجم الخط مرة أخرى إلى 24 بكسل. يمكنك إضافة أكبر عدد ممكن من استعلامات الوسائط حسب الحاجة لموقعك على الويب.
الحد الأدنى للعرض و العرض الأقصى
توجد طريقتان عمومًا لكتابة استعلامات الوسائط - باستخدام "min-width" أو "max-width". حتى الآن ، رأينا "min-width" في العمل. يؤدي هذا إلى تفعيل "استعلامات الوسائط" بمجرد وصول المستعرض إلى الحد الأدنى من العرض على الأقل. لذلك ، سيتم تطبيق طلب بحث يستخدم "min-width: 1000px" عندما يكون المتصفح بعرض 1000 بكسل على الأقل. يتم استخدام هذا النمط من Media Query عند إنشاء موقع بطريقة "الجوّال أولاً".
إذا كنت تستخدم "max-width" ، فإنها تعمل بالطريقة المعاكسة. سيتم تطبيق "استبيان وسائط" من "max-width: 1000px" بمجرد سقوط المتصفح أسفل هذا الحجم.
فيما يتعلق المتصفحات القديمة
أحد التحديات مع استعلامات الوسائط هو عدم دعمهم في الإصدارات الأقدم على Internet Explorer. لحسن الحظ ، هناك العديد من المتغيرات المتاحة التي يمكنها تصحيح دعم "استعلامات الوسائط" في تلك المتصفحات القديمة ، مما يسمح لك باستخدامها على مواقع الويب اليوم مع ضمان عدم ظهور عرض هذا الموقع في برامج المتصفح القديمة.
حرره جيريمي جيرارد في 1/24/17