0HTML5 شعارصور خلفية استجابة للمواقع

نشرت بواسطة & قدم تحت تقنيات الويب.

لقد تم مؤخرا استكمال بلدي المواقع وخادم الويب وإضافة موقع جديد (LoveCrete.org). أردت أن يكون صورة خلفية على LoveCrete وأدركت أن وبطبيعة الحال 1 لا يصلح جميع الشاشات. فيما يلي ملخص لما كان تفكيري وما فعلته لتلبية العديد من أحجام الشاشات والتوجهات.

التي توجه

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

قررت أن أضع الصور في منتصف الصفحة وأترك ​​الحواف تضيع من حافة الشاشة في بعض الحالات. عند استخدام الهاتف في الاتجاه الرأسي ، سيتم تحميل الصورة بناءً على الارتفاع (لا عرض) وسوف تفقد الكثير من كلا حافة الصورة. قد يعني القيام بذلك بأي طريقة أخرى الحاجة إلى اقتصاص الصور إلى شكل مختلف تمامًا أو وجود "تجانب" صورة أفقية على شاشة طويلة, وهو غير مرغوب فيه.

كانت نسب الحجم الأقصى للصورة في كل مجموعة في كل مكان 1.6 مع عدد قليل أعلى قليلاً. لتبسيط الأمور قررت استخدام نسبة 16:10 لجميع الصور، وجاء مع الأحجام لجعل وفقا لذلك.

هذا يعني في معظم الحالات أن الصورة لن تكون مناسبة تمامًا لحجم الشاشة, ولكن ستحصل جميع الشاشات على شيء قريب جدًا ولن ينتهي الأمر بالشاشة بشيء صغير جدًا. وهذا يعني أيضا مصدر الصورة يمكن حصدها ل 16:10 مرة واحدة وبعد ذلك يتم إنشاء أحجام متعددة بسهولة

جماعات قرار المشهد المشترك

ارتفاععرضالصورة لجعلالتعليقات
4:316:1016:9
2160288038402400× 38404ك 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× 1280720ع
600
576		800
768		960
-		-
1024		640× 1024
480640768480× 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); }}
}

اترك رد