[css] ما الفرق بين "الشاشة" و "الشاشة فقط" في استعلامات الوسائط؟


Answers

ما يلي من مستندات Adobe .

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

media="only screen and (min-width: 401px) and (max-width: 600px)"

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

media="only"

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

media="screen and (min-width: 401px) and (max-width: 600px)"

مثل

media="screen"

بمعنى آخر ، يجب تطبيق قواعد النمط على جميع أجهزة الشاشة ، على الرغم من أنها لا تعرف ما تعنيه استعلامات الوسائط.

للأسف ، فشلت IE 6–8 في تنفيذ المواصفات بشكل صحيح.

بدلاً من تطبيق الأنماط على كل أجهزة الشاشة ، يتجاهل ورقة الأنماط تمامًا.

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

لذلك ، باستخدام

media="only screen and (min-width: 401px)"

و

media="screen and (min-width: 401px)"

سيكون له نفس التأثير في IE6-8: كلاهما سيمنع استخدام هذه الأنماط. ومع ذلك ، سوف يتم تنزيلها.

أيضًا ، في المتصفحات التي تدعم استعلامات وسائط CSS3 ، سيحمّل كلا الإصدارين الأنماط إذا كان عرض إطار العرض أكبر من 401px وأن نوع الوسائط هو الشاشة.

لست متأكدًا تمامًا من المتصفحات التي لا تدعم استعلامات وسائط CSS3 التي ستحتاج إلى الإصدار only

media="only screen and (min-width: 401px)" 

في مقابل

media="screen and (min-width: 401px)"

للتأكد من عدم تفسيره على أنه

media="screen"

سيكون اختبارًا جيدًا لشخص ما يمكنه الوصول إلى مختبر الجهاز.

Question

ما الفرق بين "الشاشة" و "الشاشة فقط" في استعلامات الوسائط؟

<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />

لماذا نحن مطالبون باستخدام " فقط ". هل screen نفسها لا تقدم معلومات كافية ليتم عرضها فقط على الشاشة؟

لقد رأيت العديد من مواقع الويب المتجاوبة. بعض الاستخدام

@media screen and (max-width:632px)

بعض

@media (max-width:632px)

و البعض

@media only screen and (max-width:632px)



الإجابة عن طريقhybrid مفيدة للغاية ، إلا أنني لا أفسر الغرض كما ذكرهashitaka "ماذا لو كنت تستخدم أسلوب Mobile First؟ لذا ، لدينا css المحمول أولاً ومن ثم استخدم min-width لاستهداف مواقع أكبر. يجب ألا نستخدم الكلمة الرئيسية الوحيدة في هذا السياق ، أليس كذلك؟ "

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

الإجابة على ashitaka النظر في هذا المثال

<link rel="stylesheet" type="text/css" 
  href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" 
  href="desktop.css" media="screen and (min-width: 481px)" />

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




Links