لقد تم مؤخرا استكمال بلدي المواقع وخادم الويب وإضافة موقع جديد (LoveCrete.org). أردت أن يكون صورة خلفية على LoveCrete وأدركت أن وبطبيعة الحال 1 لا يصلح جميع الشاشات. فيما يلي ملخص لما كان تفكيري وما فعلته لتلبية العديد من أحجام الشاشات والتوجهات.
التي توجه
لقد بدأت بجعل نفسي جدولًا صغيرًا لجميع القرارات الشائعة المستخدمة أجهزة الكمبيوتر والأجهزة اللوحية (في الاتجاه الأفقي). قررت التركيز على هذا لأن معظم الصور متوفرة في المناظر الطبيعية ، لذا يعد هذا مكانًا معقولًا للبدء.
قررت أن أضع الصور في منتصف الصفحة وأترك الحواف تضيع من حافة الشاشة في بعض الحالات. عند استخدام الهاتف في الاتجاه الرأسي ، سيتم تحميل الصورة بناءً على الارتفاع (لا عرض) وسوف تفقد الكثير من كلا حافة الصورة. قد يعني القيام بذلك بأي طريقة أخرى الحاجة إلى اقتصاص الصور إلى شكل مختلف تمامًا أو وجود "تجانب" صورة أفقية على شاشة طويلة, وهو غير مرغوب فيه.
كانت نسب الحجم الأقصى للصورة في كل مجموعة في كل مكان 1.6 مع عدد قليل أعلى قليلاً. لتبسيط الأمور قررت استخدام نسبة 16:10 لجميع الصور، وجاء مع الأحجام لجعل وفقا لذلك.
هذا يعني في معظم الحالات أن الصورة لن تكون مناسبة تمامًا لحجم الشاشة, ولكن ستحصل جميع الشاشات على شيء قريب جدًا ولن ينتهي الأمر بالشاشة بشيء صغير جدًا. وهذا يعني أيضا مصدر الصورة يمكن حصدها ل 16:10 مرة واحدة وبعد ذلك يتم إنشاء أحجام متعددة بسهولة
جماعات قرار المشهد المشترك
| ارتفاع | عرض | الصورة لجعل | التعليقات | ||
|---|---|---|---|---|---|
| 4:3 | 16:10 | 16:9 | |||
| 2160 | 2880 | 3840 | 2400× 3840 | 4ك UHD | |
| 1600 1536 1440 | - 2048 1920 | 2560 - - | - - 2560 | 1600× 2560 | |
| 1200 1080 1050 | 1600 1440 1400 | 1920 - 1680 | - 1920 - | 1200× 1920 | عالي الوضوح 1080p |
| 960 900 | 1280 1200 | 1536 1440 | - 1600 | 1000× 1600 | |
| 800 768 720 | - 1024 960 | 1280 - - | - - 1280 | 800× 1280 | 720ع |
| 600 576 | 800 768 | 960 - | - 1024 | 640× 1024 | |
| 480 | 640 | 768 | 480× 768 | ||
كما ترى ، لقد جمعت عددًا قليلاً من القرارات وسأقوم بعد ذلك 1 الصورة التي ستغطي جميع الارتفاعات حتى أكبر ارتفاع في تلك المجموعة. سأتأكد من أن الصورة عريضة أيضًا بما يكفي لأقصى عرض يمكن أن يقترن به مثل هذا الارتفاع على شاشة عادية. لم آخذ في الاعتبار التكوينات غير العادية مثل 21:9 الشاشات أو الشاشات المتعددة - يجب أن يكون هناك حد في مكان ما!
لان CSS يستخدم إطار العرض أو حجم المستعرض ولا تحتاج الشاشات الأفقية لحجم الشاشة إلى استخدام العرض بدلاً من الارتفاع - كما هو الحال في معظم الأنظمة ، يفقد الجزء العلوي والسفلي مساحة لأشرطة العناوين وما إلى ذلك بينما يتم تكبير العرض عادةً. ومع ذلك, بالنسبة للعروض الرأسية ، من الأفضل استخدام خاصية الارتفاع. ويمكن القيام بذلك كما CSS يمكن تحديد اتجاه الشاشة
ال CSS تستخدم ثم يبدو كما يلي
الجسم{تكرار الخلفية: عدم تكرار; مرفق الخلفية: ثابت; خلفية موقف: مركز الوسط; خلفية الحجم: التغطية;}
@وسائل الإعلام (ماكس العرض: 768بكسل) {الجسم { الصورة الخلفية: رابط(bg480.jpg); }}
@وسائل الإعلام (مين العرض:769بكسل) و (ماكس العرض: 1024بكسل) {الجسم { الصورة الخلفية: رابط(bg640.jpg); }}
@وسائل الإعلام (مين العرض:1025بكسل) و (ماكس العرض: 1280بكسل) {الجسم { الصورة الخلفية: رابط(bg800.jpg); }}
@وسائل الإعلام (مين العرض:1281بكسل) و (ماكس العرض: 1600بكسل) {الجسم { الصورة الخلفية: رابط(bg1000.jpg); }}
@وسائل الإعلام (مين العرض:1601بكسل) و (ماكس العرض: 1920بكسل) {الجسم { الصورة الخلفية: رابط(bg1200.jpg); }}
@وسائل الإعلام (مين العرض:1921بكسل) و (ماكس العرض: 2560بكسل) {الجسم { الصورة الخلفية: رابط(bg1600.jpg); }}
@وسائل الإعلام (مين العرض:2561بكسل) {الجسم { الصورة الخلفية: رابط(../صور / bg2400.jpg); }}
@وسائل الإعلام (اتجاه: صورة){
@وسائل الإعلام (اقصى ارتفاع: 480بكسل) {الجسم { الصورة الخلفية: رابط(bg480.jpg); }}
@وسائل الإعلام (مين ارتفاع:481بكسل) و (اقصى ارتفاع: 640بكسل) {الجسم { الصورة الخلفية: رابط(bg640.jpg); }}
@وسائل الإعلام (مين ارتفاع:641بكسل) و (اقصى ارتفاع: 800بكسل) {الجسم { الصورة الخلفية: رابط(bg800.jpg); }}
@وسائل الإعلام (مين ارتفاع:801بكسل) و (اقصى ارتفاع: 1000بكسل) {الجسم { الصورة الخلفية: رابط(bg1000.jpg); }}
@وسائل الإعلام (مين ارتفاع:1001بكسل) و (اقصى ارتفاع: 1200بكسل) {الجسم { الصورة الخلفية: رابط(bg1200.jpg); }}
@وسائل الإعلام (مين ارتفاع:1201بكسل) و (اقصى ارتفاع: 1600بكسل) {الجسم { الصورة الخلفية: رابط(bg1600.jpg); }}
@وسائل الإعلام (مين ارتفاع:1601بكسل) {الجسم { الصورة الخلفية: رابط(bg2400.jpg); }}
} من فضلك أرسل لنا أفكارك بالتعليق أدناه! إذا كنت ترغب في الاشتراك يرجى استخدام الرابط الاشتراك في القائمة في اعلى اليمين. يمكنك أيضا مشاركة هذا مع أصدقائك باستخدام الروابط الاجتماعية أدناه. في صحتك.
جورج ال على حل القصاصات الغنية أخطاء غوغل أداة اختبار: “شكرا للمشاركة.”
اترك رد