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

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

التي توجه

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, which is not desir­able.

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 for all images and came up with sizes to make accord­ingly.

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 cre­ated

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

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 some­where!

لان 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 ori­ent­a­tion

ال CSS used then looks as fol­lows

الجسم{تكرار الخلفية: عدم تكرار; مرفق الخلفية: ثابت; خلفية موقف: مركز الوسط; خلفية الحجم: التغطية;}

@وسائل الإعلام (ماكس العرض: 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); }}
}

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