在线笔记 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>

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

999

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

An example of increasing productivity with the Favinavi web favorites sharing feature
Favinavi’s humanized network favorites provides a sharing function, that is, u...
CSS实现倾斜绶带式45°标签
有时候页面需要在某个元素上设置一个醒目的标志，比如“审核中”、“热卖中”、“HOT”等等，此时本样式比较合适。先上图看最终效果。 [img]
为什么会做favinavi网络收藏夹网站？记录一下心路历程
记得最早是在2007年，那时工作需要，经常用浏览器上网查资料、访问工作网站等等。经常遇到一个问题，就是白天工作时看到一个网站的某篇文章很有用，在浏览器设为了书签...
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...
使用certbot申请泛域名证书以及手动续期
泛域名的证书申请或手动续期需要在dns解析服务器设置相应的txt记录。申请或续期使用同样的certbot命令，如下，记录以备用。
使用favinavi网络收藏夹分享功能提高工作效率一例
favinavi人性化网络收藏夹提供了分享功能，就是用户可以将自己收藏、整理后的书签分享给自己的同学、同事或朋友等。在某地政府部门工作的一位领导（这里为了方...