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

لقد تم مؤخرا استكمال بلدي المواقع وخادم الويب وإضافة موقع جديد (LoveCrete.org). أردت أن يكون صورة خلفية على LoveCrete وأدركت أن وبطبيعة الحال 1 لا يصلح جميع الشاشات. Here is a sum­mary of what my think­ing was and what I did to cater for the numer­ous screen sizes and orientations.

التي توجه

I star­ted by mak­ing myself a little table of all the com­mon res­ol­u­tions used on أجهزة الكمبيوتر and tab­lets (in hori­zont­al ori­ent­a­tion). I decided to focus on this because most images are avail­able in land­scape so this is a sens­ible place to start.

I decided that I would place images cent­rally on the page and let the edges be lost off the edge of the screen in some instances. When a phone is used in por­trait ori­ent­a­tion it will load the image based on height (لا عرض) وسوف تفقد الكثير من كلا حافة الصورة. Doing it any oth­er way would mean need­ing images cropped to a totally dif­fer­ent shape or hav­ing a land­scape image “tile” on a tall screen, وهو غير مرغوب فيه.

The ratios of the max­im­um size image to make in each group were all around 1.6 with a few a bit high­er. To keep things sim­pler I decided to use a ratio of 16:10 لجميع الصور، وجاء مع الأحجام لجعل وفقا لذلك.

This means in most cases the image will not be a per­fect fit to the screen size, but all screens will get some­thing very close and no screen will end up with some­thing too small. وهذا يعني أيضا مصدر الصورة يمكن حصدها ل 16:10 once and then mul­tiple sizes eas­ily created

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

As you can see I have grouped quite a few res­ol­u­tions and will then make 1 image that will cov­er all heights up to the largest height in that group. I will make sure the image is also wide enough for the max­im­um width such a height might be paired with on a nor­mal screen. I haven’t taken account of unusu­al con­fig­ur­a­tions like 21:9 mon­it­ors or mul­tiple screens — there has to be a lim­it somewhere!

لان CSS uses the view­port or browser size and not the screen size land­scape screens need to use width rather than height — as on most sys­tems the top and bot­tom lose space to title bars etc whilst the width is usu­ally max­im­ised. ومع ذلك, for por­trait dis­plays it is bet­ter to use the height prop­erty. ويمكن القيام بذلك كما CSS can identi­fy the screen orientation

ال 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); }}
}

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