在线笔记 favinavi - 人性化网络收藏夹

HTML5时代，使用同一个背景图片的多个链接自动适配不同屏幕宽度的一种方法

分类标签：全部 CSS html javascript php/other IT

by: fanshome 2023-06-03 06:09(UTC)

演示

在很久很久以前，没有智能手机的时代，写网站只要考虑PC显示屏幕，基本上任何页面元素都只要固定的宽度和高度，比较好处理。

为了提高页面的加载速度，讲究点的方法是：

假如某个页面有多个小图片（比如二十个小图标）需要显示，可以把这二十个小图片合并到一张大图，然后通过背景图片切片的方法（background-position:）来显示不同的小图片，从而极大地提高页面加载速度。

当今时代，适配大大小小各类屏幕成了某种必需，最好能适配超过分辨率的pc大屏幕、普通笔记本电脑、pad、手机等等。虽然网速比从前提高了很多，但是，尽量减少网页图片使用数量依然是提高网页加载速度的必要手段。

有些时候，我们需要为同一类型、同样大小的链接配上不同的图片，此时，假如能够只使用一张图片来解决问题就更好了。例如，某些场合要用户选择不同的浏览器来进行下一步，假设用到以下这一张图片中的5种浏览器：

需求是：图片能自动适配不同屏幕宽度，使用背景图片方式来分割出5个链接，缩放窗口大小时，图片自动跟着缩放，同时宽高比不变，即保持图片不变形；与此同时，对应的5个链接也要随着背景图片的缩放而同比例缩放。

那么要怎么实现呢？请看以下CSS代码，任何用到宽度、高度的地方都使用百分比，保证缩放比例不变形。

CSS复制代码

h2{
	text-align:center;
}
.wrap{
	width:100%;
	overflow:hidden;
}
.browsers{
	background:url(/g/browsers.webp) no-repeat;
	background-size:80% 80%;
	width:100%;
	height:0;
	padding-bottom:20%;
	margin-left:10%;
}
.browsers a{
	width:16%;
	height:0;
	padding-top:20%;
	margin-top:-2%;
	display:inline-block;
	float:left;
}
.browsers a:hover{
	background:#f00;
	opacity:0.2;
}

html复制代码

<h2>可以通过调整浏览器窗口宽度来查看缩放效果</h2><br/><br/>
<div class='wrap'>
	<div class='browsers'>
		<a href='#chrome'></a>
		<a href='#firefox'></a>
		<a href='#safari'></a>
		<a href='#edge'></a>
		<a href='#b360'></a>
	</div>
</div>
<h2>鼠标移到图片上显示链接实际大小和位置</h2>

最终效果基本令人满意，窗口缩放时，背景图片和空白块链接同比、同时缩放，用户感受良好。

1905

favinavi - 重度网络用户必备在线笔记

网站开发测试环境启用https，使用自签发ssl证书不是个好主意
如题，即使你折腾了一圈把自签发证书安装好了，最后一步还是会遇到浏览器不认证书的问题（比如最新版的chrome），即便你已经添加了“信任此根证书颁发机构”。带着“...
favinavi为什么会选择微软的bing搜索作为默认的搜索引擎？
这个选择初看有点奇怪，因为论搜索，谷歌是当然的第一选择，而中文搜索，百度又是当仁不让的中文搜索老大，微软的bing虽然做得还不错，但无论从哪方面说，它似乎都不该...
发现一只有趣的蜘蛛——“BSbot”
最近发现有一个有趣的蜘蛛来访，它的User Agent是这么写的： BSbot 1.1 (monthly copyright check - html/js/...
使用CSS让大背景图片适应不同大小屏幕又一例
这个示例网页使用了一个较大的背景图片，并使用CSS的background-size属性和@media查询来确保这个图片在不同尺寸的终端屏幕上都能够自适应。在小于...
明明做好了301跳转，为什么某些搜索引擎就是不来收录新站？
favinavi自己就遇到了这个问题，老域名www.favii.cn虽然已有十几年历史，积累了一些忠实粉丝，但是为了能更好的拓展发展空间，还是痛下决心启用了fa...
How long a new website can occupy the first position of search engine
Whether a new website can rank first on the main keywords depends on many factor...