default
menu home
Icon library Sign up Login favorite_border message help_outline
Online notes - online bookmark

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

styleTags: All CSS html javascript php/other IT
by: fanshome  2023-06-03 06:09(UTC)

Demo

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

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

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

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

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

browsers pic

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

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

CSScontent_copyCopy codes
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;
}

htmlcontent_copyCopy codes
<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>

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

visibility 1966


- for heavy web user Online notes
adimg
logo Post a comment

captcha
Please check the captcha code
Cancel