لقد تم مؤخرا استكمال بلدي المواقع وخادم الويب وإضافة موقع جديد (LoveCrete.org). أردت أن يكون صورة خلفية على LoveCrete وأدركت أن وبطبيعة الحال 1 لا يصلح جميع الشاشات. Here is a summary of what my thinking was and what I did to cater for the numerous screen sizes and orientations.
التي توجه
I started by making myself a little table of all the common resolutions used on أجهزة الكمبيوتر and tablets (in horizontal orientation). I decided to focus on this because most images are available in landscape so this is a sensible place to start.
I decided that I would place images centrally on the page and let the edges be lost off the edge of the screen in some instances. When a phone is used in portrait orientation it will load the image based on height (لا عرض) وسوف تفقد الكثير من كلا حافة الصورة. Doing it any other way would mean needing images cropped to a totally different shape or having a landscape image “tile” on a tall screen, وهو غير مرغوب فيه.
The ratios of the maximum size image to make in each group were all around 1.6 with a few a bit higher. To keep things simpler I decided to use a ratio of 16:10 لجميع الصور، وجاء مع الأحجام لجعل وفقا لذلك.
This means in most cases the image will not be a perfect fit to the screen size, but all screens will get something very close and no screen will end up with something too small. وهذا يعني أيضا مصدر الصورة يمكن حصدها ل 16:10 once and then multiple sizes easily created
جماعات قرار المشهد المشترك
ارتفاع | عرض | الصورة لجعل | Comments | ||
---|---|---|---|---|---|
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 |
As you can see I have grouped quite a few resolutions and will then make 1 image that will cover all heights up to the largest height in that group. I will make sure the image is also wide enough for the maximum width such a height might be paired with on a normal screen. I haven’t taken account of unusual configurations like 21:9 monitors or multiple screens — there has to be a limit somewhere!
لان CSS uses the viewport or browser size and not the screen size landscape screens need to use width rather than height — as on most systems the top and bottom lose space to title bars etc whilst the width is usually maximised. ومع ذلك, for portrait displays it is better to use the height property. ويمكن القيام بذلك كما CSS can identify 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); }} }
ما رأيك? ترك لنا تعليق أدناه! إذا كنت ترغب في الاشتراك يرجى استخدام الرابط الاشتراك في القائمة في اعلى اليمين. يمكنك أيضا مشاركة هذا مع أصدقائك باستخدام الروابط الاجتماعية أدناه. في صحتك.
اترك رد