0HTML5标志响应背景图片的网站

我最近一直在更新我的网站和网络服务器,并添加新站点 (LoveCrete.org). 我想有一个LoveCrete背景图像和意识到,当然 1 尺寸不适合所有屏幕. 这里是一个总结就是我的想法是和我做了什么,以迎合众多的屏幕大小和方向.

哪个方向

我开始让自己所有的小桌子上使用的常用分辨率 电脑 和平板电脑 (在水平方向). 我决定把重点放在这一点,因为大多数图像是景观可用,所以这是一个明智的开端.

我决定,我会集中在页面上放置图像,让边缘在某些情况下会丢失关闭屏幕的边缘. 当手机在纵向使用它会根据身高加载图像 (不宽) 并从图像的边缘都失去了很多. 做任何其他的方式就意味着需要裁剪到一个完全不同形状的图片,或风景图片 “瓦” 一个高大的屏幕上, 这是不希望.

的最大尺寸的图像的每个组中,使比率分别为四周 1.6 有几个高一点. 为了让事情变得更简单,我决定使用的比 16:10 所有图像,并想出了大小做出相应.

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

常见的景观分辨率组

高度宽度图像,使其注释
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×19201080p全高清
960
900
1280
1200
1536
1440

1600
1000×1600
800
768
720

1024
960
1280



1280
800×1280720p
600
576
800
768
960

1024
640×1024
480640768480×768

正如你可以看到我已经划分好几个决议,然后将 1 图像可以覆盖所有的高度到最大高度组. 我会确保形象也足够宽的最大宽度这样的高度可能会与正常屏幕上配对. 我还没有考虑到像不寻常的配置 21:9 监视器或多个屏幕 – 必须有一个限度的地方!

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

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); }}
}

发现这个有用? 请不要让我们知道通过下降到低于评论. 如果您想订阅,请使用菜单上的订阅链接右上方. 您还可以通过使用下面的链接社会分享这与你的朋友. 干杯.

发表评论