توسع CSS بناءً على حجم شاشة الصورة أو المناظر الطبيعية؟

Question

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

لذلك سوف يتوسع DIV عندما يكون في وضع المناظر الطبيعية ويتقلص قليلاً في الصورة.

أيه أفكار؟

Answer 1

حسنًا ، هذا غير ممكن مع CSS2 ، ولكن سيكون من الممكن أن تفعل ما تريد مع JavaScript (اقرأ حجم الشاشة وما إلى ذلك).

لست متأكدًا من التكنولوجيا التي تبحث عنها ، ولكن CSS3 يوفر بالضبط ما تريد به استفسارات الوسائط CSS3.

مع CSS3 لديك أشياء ممتعة مثل هذه (أو يمكنك حتى تحديد العرض على سبيل المثال 200 بكسل):

/* Portrait */
@media screen and (orientation:portrait) {
   /* Portrait styles here */
}
/* Landscape */
@media screen and (orientation:landscape) {
   /* Landscape styles here */
}

الدفع صفحة المثال هذه لمزيد من التفسير ، أو هذا.

تعديل فقط لأنني وجدت هذه الصفحة اليوم: استفسارات وسائل الإعلام CSS3 Hardbroiled - كتابة جيدة جدا.

Answer 2

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

---

اقتبس من W3.org حول ميزة الوسائط "التوجيه":

ميزة الوسائط "التوجيه" هي "صورة" عندما تكون قيمة "ارتفاعميزة الوسائط أكبر من أو يساوي إلى قيمة 'العرضميزة الوسائط. وإلا "التوجيه" هو "المناظر الطبيعية".

ملاحظة/اقتباس من مطور. mozilla.org حول ميزة "الاتجاه":

ملاحظة: هذه القيمة (أي صورة أو منظر طبيعي) يفعل ليس تتوافق مع الفعلي اتجاه الجهاز. يؤدي فتح لوحة المفاتيح الناعمة على معظم الأجهزة في اتجاه الصورة إلى أن يصبح منفذ العرض أوسع مما هو طويل ، مما يؤدي إلى استخدام المتصفح أنماط المناظر الطبيعية بدلاً من الصورة.

---

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

JSfiddle Demo (حاول تغيير حجم منفذ العرض)

فيما يلي الاستعلامات الإعلامية التمثيلية التي تؤثر على الصورة وتوجيه المناظر الطبيعية.

 @media screen and (orientation:portrait) {
     /* Portrait styles */
     /*set width to 100px */

 }
 @media screen and (orientation:landscape) {
     /* Landscape styles */
     /* set width to 200px*/

 }