0响应背景图片的网站

我最近一直在更新我的网站和网络服务器，并添加新站点 (LoveCrete.org). 我想有一个LoveCrete背景图像和意识到，当然 1 尺寸不适合所有屏幕. 以下是我的想法以及我为满足众多屏幕尺寸和方向所做的工作的总结.

哪个方向

我首先为自己制作了一张所有常用分辨率的小表格 电脑 和平板电脑 (水平方向). 我决定专注于这一点，因为大多数图像都是横向的，所以这是一个明智的起点.

我决定将图像放在页面的中心位置，并在某些情况下让边缘从屏幕边缘消失. 当手机以纵向使用时，它将根据高度加载图像 (不宽) 并从图像的边缘都失去了很多. 以任何其他方式进行操作将意味着需要将图像裁剪为完全不同的形状或在高屏幕上“平铺”横向图像, 这是不希望.

每组制作的最大尺寸图像的比例都在附近 1.6 有一些更高一点. 为了让事情更简单，我决定使用一个比率 16:10 所有图像，并想出了大小做出相应.

这意味着在大多数情况下，图像不会完全适合屏幕尺寸, 但是所有屏幕都会得到非常接近的东西，并且没有屏幕会以太小的东西结束. 这也意味着一个源图像可以被裁剪到 16:10 一次又一次轻松创建多个尺寸

常见的景观分辨率组

正如你所看到的，我已经对很多决议进行了分组，然后将 1 将覆盖所有高度的图像，直到该组中的最大高度. 我将确保图像也足够宽，可以在普通屏幕上匹配这样的最大宽度. 我没有考虑不寻常的配置，比如 21:9 显示器或多个屏幕——某处必须有限制!

因为 CSS 使用视口或浏览器大小而不是屏幕大小横向屏幕需要使用宽度而不是高度——因为在大多数系统上，顶部和底部会失去标题栏等空间，而宽度通常会最大化. 然而, 对于纵向显示，最好使用 height 属性. 这是可以做到的 CSS 可以识别屏幕方向

该 CSS 然后用如下所示

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

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

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