هل يمكن لأحد أن يشرح استفسارات وسائل الإعلام CSS؟

Question

قرأت المقال عنها في CSS3.info, ، لكنني لم أشعر أنه أوضح ذلك جيدًا بما فيه الكفاية. كما لم أتمكن من الحصول على أمثلة على التغيير مع حجم الشاشة. حاولت في سفاري ، FF ، Chrome.

هل هذه ميزة غير جاهزة للدفاع بعد؟

إذا كنت أرغب في ضبط بعض الأنماط عندما تكون نافذة المتصفح أقل من 1024 بكسل. كيف أقوم بذلك؟

Answer 1

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

http://www.w3.org/tr/css3-mediaqueries/

إذا كنت ترغب في ضبط النمط عندما يكون منفذ العرض أقل من 1024 بكسل ، يمكنك استخدام هذه القاعدة:

@media screen and (max-width: 1024px) { … }

على أي حال ، تنطبق هذه القاعدة فقط على الحجم الفعلي للمنفذ. إذا قمت بتغيير حجم منفذ العرض دون إعادة تحميل الصفحة ، فلن يتم تطبيق الأنماط.

Answer 2

لتطبيق ورقة أنماط على مستند عند عرضها على شاشة أكبر من 800 بكسل:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" >

لتطبيق ورقة أنماط على مستند عند عرضه على أي جهاز أقل من 400 بكسل:

<link rel="stylesheet" media="all and (max-device-width: 400px)" >

داخل

@media all and (max-width:800px) {
    body { color: red; }
}

للآيفون

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

::الجمع بين الاستعلام الإعلامي

Answer 3

لمعرفة كيف تتفاعل استفسارات الوسائط المختلفة على تغيير الحجم أو تغيير الاتجاه ، جرب العرض التوضيحي في هذه الصفحة:

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

يمكنك ضبط سمات استعلام الوسائط للتعرف على كيفية تأثيرها على الصفحة.

Answer 4

فيما يلي بعض المشاريع التي تحل هذه المشكلة وهي في طليعة CSS الديناميكية وأحجام الشاشة:

• 320 وما فوق:

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

• lessframework:

  إطار أقل هو نظام شبكة CSS لتصميم مواقع الويب التكيفية. أنه يحتوي على 4 تخطيطات و 3 مجموعات من الإعدادات المسبقة للطباعة ، وكلها تعتمد على شبكة واحدة.