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 然后用如下所示

身体{背景重复: 不重复; 背景附件: 固定; 背景位置: 中心中心; 背景大小: 覆盖;}

@媒体 (最大宽度: 768PX) {身体 { 背景图片: 网址(bg480.jpg); }}
@媒体 (最小宽度:769PX) and (最大宽度: 1024PX) {身体 { 背景图片: 网址(bg640.jpg); }}
@媒体 (最小宽度:1025PX) and (最大宽度: 1280PX) {身体 { 背景图片: 网址(bg800.jpg); }}
@媒体 (最小宽度:1281PX) and (最大宽度: 1600PX) {身体 { 背景图片: 网址(bg1000.jpg); }}
@媒体 (最小宽度:1601PX) and (最大宽度: 1920PX) {身体 { 背景图片: 网址(bg1200.jpg); }}
@媒体 (最小宽度:1921PX) and (最大宽度: 2560PX) {身体 { 背景图片: 网址(bg1600.jpg); }}
@媒体 (最小宽度:2561PX) {身体 { 背景图片: 网址(../图片/ bg2400.jpg); }}

@媒体 (取向: 肖像){
@媒体 (最大高度: 480PX) {身体 { 背景图片: 网址(bg480.jpg); }}
@媒体 (最小高度:481PX) and (最大高度: 640PX) {身体 { 背景图片: 网址(bg640.jpg); }}
@媒体 (最小高度:641PX) and (最大高度: 800PX) {身体 { 背景图片: 网址(bg800.jpg); }}
@媒体 (最小高度:801PX) and (最大高度: 1000PX) {身体 { 背景图片: 网址(bg1000.jpg); }}
@媒体 (最小高度:1001PX) and (最大高度: 1200PX) {身体 { 背景图片: 网址(bg1200.jpg); }}
@媒体 (最小高度:1201PX) and (最大高度: 1600PX) {身体 { 背景图片: 网址(bg1600.jpg); }}
@媒体 (最小高度:1601PX) {身体 { 背景图片: 网址(bg2400.jpg); }}
}

有你自己的一些想法? 下面放纵自己通过评论! 如果您想订阅，请使用菜单上的订阅链接右上方. 您还可以通过使用下面的链接社会分享这与你的朋友. 干杯.