我最近一直在更新我的网站和网络服务器，并添加新站点 (LoveCrete.org). 我想有一个LoveCrete背景图像和意识到，当然 1 尺寸不适合所有屏幕. 以下是我的想法以及我为满足众多屏幕尺寸和方向所做的工作的总结.
哪个方向
我首先为自己制作了一张所有常用分辨率的小表格 电脑 和平板电脑 (水平方向). 我决定专注于这一点，因为大多数图像都是横向的，所以这是一个明智的起点.
我决定将图像放在页面的中心位置，并在某些情况下让边缘从屏幕边缘消失. 当手机以纵向使用时，它将根据高度加载图像 (不宽) 并从图像的边缘都失去了很多. 以任何其他方式进行操作将意味着需要将图像裁剪为完全不同的形状或在高屏幕上“平铺”横向图像, 这是不希望.
每组制作的最大尺寸图像的比例都在附近 1.6 有一些更高一点. 为了让事情更简单，我决定使用一个比率 16:10 所有图像，并想出了大小做出相应.
这意味着在大多数情况下，图像不会完全适合屏幕尺寸, 但是所有屏幕都会得到非常接近的东西，并且没有屏幕会以太小的东西结束. 这也意味着一个源图像可以被裁剪到 16:10 一次又一次轻松创建多个尺寸
常见的景观分辨率组
| 高度 | 宽度 | 图像，使其 | COM，目 | ||
|---|---|---|---|---|---|
| 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 | 720p |
| 600 576 | 800 768 | 960 - | - 1024 | 640×1024 | |
| 480 | 640 | 768 | 480×768 | ||
正如你所看到的，我已经对很多决议进行了分组，然后将 1 将覆盖所有高度的图像，直到该组中的最大高度. 我将确保图像也足够宽，可以在普通屏幕上匹配这样的最大宽度. 我没有考虑不寻常的配置，比如 21:9 显示器或多个屏幕——某处必须有限制!
因为 CSS 使用视口或浏览器大小而不是屏幕大小横向屏幕需要使用宽度而不是高度——因为在大多数系统上，顶部和底部会失去标题栏等空间，而宽度通常会最大化. 然而, 对于纵向显示，最好使用 height 属性. 这是可以做到的 CSS 可以识别屏幕方向
该 CSS 然后用如下所示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | body{background-repeat: no-repeat; background-attachment: fixed; background-position: center center; background-size: cover;} @media (max-width: 768px) {body { background-image: url(bg480.jpg); }} @media (min-width:769px) and (max-width: 1024px) {body { background-image: url(bg640.jpg); }} @media (min-width:1025px) and (max-width: 1280px) {body { background-image: url(bg800.jpg); }} @media (min-width:1281px) and (max-width: 1600px) {body { background-image: url(bg1000.jpg); }} @media (min-width:1601px) and (max-width: 1920px) {body { background-image: url(bg1200.jpg); }} @media (min-width:1921px) and (max-width: 2560px) {body { background-image: url(bg1600.jpg); }} @media (min-width:2561px) {body { background-image: url(../images/bg2400.jpg); }} @media (orientation: portrait){ @media (max-height: 480px) {body { background-image: url(bg480.jpg); }} @media (min-height:481px) and (max-height: 640px) {body { background-image: url(bg640.jpg); }} @media (min-height:641px) and (max-height: 800px) {body { background-image: url(bg800.jpg); }} @media (min-height:801px) and (max-height: 1000px) {body { background-image: url(bg1000.jpg); }} @media (min-height:1001px) and (max-height: 1200px) {body { background-image: url(bg1200.jpg); }} @media (min-height:1201px) and (max-height: 1600px) {body { background-image: url(bg1600.jpg); }} @media (min-height:1601px) {body { background-image: url(bg2400.jpg); }} } |
认为我们已经错过了什么? 让我们通过下面的评论知道. 如果您想订阅，请使用菜单上的订阅链接右上方. 您还可以通过使用下面的链接社会分享这与你的朋友. 干杯.
尼尔 上 升级原雅骏阿尔法: “你好, 会是 18v 0 18v 变压器可以使用? 我能问一下你在哪里买的 17.5v 的吗?…”
发表评论