DIY মিডিয়া হোম লোগো

আপনার নিজের হোম থিয়েটার এবং হাই ফাই সেটআপ নকশা ও নির্মাণের জন্য চূড়ান্ত সাইট.

0HTML5 এর লোগোওয়েবসাইটের জন্য প্রতিক্রিয়াশীল পশ্চাদপট চিত্র

I’ve recently been updat­ing my web­sites and web serv­er and adding a new site (LoveCrete.org). I wanted to have a back­ground image on LoveCrete and real­ised that of course 1 size does­n’t fit all screens. 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

প্রচলিত ভূদৃশ্য রেজল্যুশন গ্রুপ

উচ্চতাপ্রস্থবানানোর জন্য চিত্রCom-ments
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সম্পূর্ণ HD 1080p
960
900
1280
1200
1536
1440
-
1600
1000×1600
800
768
720
-
1024
960
1280
-
-
-
-
1280
8001280 ×720পি
600
576
800
768
960
-
-
1024
640×1024
480640768480×768

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!

কারণ সিএসএস 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. এই যেমন কাজ করা যেতে পারে সিএসএস can identi­fy the screen orientation

দ্য সিএসএস ব্যবহৃত তারপর নিম্নরূপ দেখায়

শরীর{পটভূমি পুনরাবৃত্তি: নো-পুনরাবৃত্তি; পৃষ্ঠভূমি সংযুক্তি: স্থির; পটভূমি অবস্থানে রয়েছে এমন: কেন্দ্র কেন্দ্র; পটভূমি আকার: আবরণ;}

@মিডিয়া (সর্বোচ্চ প্রস্থ: 768px আকারে) {শরীর { পটভূমি চিত্র: URL(bg480.jpg); }}
@মিডিয়া (মিনিট-প্রস্থের:769px আকারে) এবং (সর্বোচ্চ প্রস্থ: 1024px আকারে) {শরীর { পটভূমি চিত্র: URL(bg640.jpg); }}
@মিডিয়া (মিনিট-প্রস্থের:1025px আকারে) এবং (সর্বোচ্চ প্রস্থ: 1280px আকারে) {শরীর { পটভূমি চিত্র: URL(bg800.jpg); }}
@মিডিয়া (মিনিট-প্রস্থের:1281px আকারে) এবং (সর্বোচ্চ প্রস্থ: 1600px আকারে) {শরীর { পটভূমি চিত্র: URL(bg1000.jpg); }}
@মিডিয়া (মিনিট-প্রস্থের:1601px আকারে) এবং (সর্বোচ্চ প্রস্থ: 1920px আকারে) {শরীর { পটভূমি চিত্র: URL(bg1200.jpg); }}
@মিডিয়া (মিনিট-প্রস্থের:1921px আকারে) এবং (সর্বোচ্চ প্রস্থ: 2560px আকারে) {শরীর { পটভূমি চিত্র: URL(bg1600.jpg); }}
@মিডিয়া (মিনিট-প্রস্থের:2561px আকারে) {শরীর { পটভূমি চিত্র: URL(../ইমেজ / bg2400.jpg); }}

@মিডিয়া (ঝোঁক: প্রতিকৃতি){
@মিডিয়া (সর্বোচ্চ উচ্চতা: 480px আকারে) {শরীর { পটভূমি চিত্র: URL(bg480.jpg); }}
@মিডিয়া (মিনিট-উচ্চতা:481px আকারে) এবং (সর্বোচ্চ উচ্চতা: 640px আকারে) {শরীর { পটভূমি চিত্র: URL(bg640.jpg); }}
@মিডিয়া (মিনিট-উচ্চতা:641px আকারে) এবং (সর্বোচ্চ উচ্চতা: 800px আকারে) {শরীর { পটভূমি চিত্র: URL(bg800.jpg); }}
@মিডিয়া (মিনিট-উচ্চতা:801px আকারে) এবং (সর্বোচ্চ উচ্চতা: 1000px আকারে) {শরীর { পটভূমি চিত্র: URL(bg1000.jpg); }}
@মিডিয়া (মিনিট-উচ্চতা:1001px আকারে) এবং (সর্বোচ্চ উচ্চতা: 1200px আকারে) {শরীর { পটভূমি চিত্র: URL(bg1200.jpg); }}
@মিডিয়া (মিনিট-উচ্চতা:1201px আকারে) এবং (সর্বোচ্চ উচ্চতা: 1600px আকারে) {শরীর { পটভূমি চিত্র: URL(bg1600.jpg); }}
@মিডিয়া (মিনিট-উচ্চতা:1601px আকারে) {শরীর { পটভূমি চিত্র: URL(bg2400.jpg); }}
}

উত্তর দিন