【CSS】map 热点area如何做到自适应啊.

Z时代
2024-01-10
分类：技术分享

有一张全屏的背景图是1920px. 要在上面加几个可点击区域链接.当然想到的是map. area来做吧

可问题来了如何做到在不同像素的显示器做到可点区域取值正确啊 ?

百度查到说是用js拿到现在的innerWidth然后除以你之前定义好像素；

var resutl = current.innerrWidth/1920;
area.coords * result;

这样的话取值还是不太正确.有偏差

回答：

图片描述

是这个意思不？
background肯定不是自适应宽度的吧？这1920px里面也不会在两边留黑的地方(如图示意)有内容可点击吧？
假定一个红色区域，比如宽1000px，只需要注意一下分辨率或者窗口尺寸宽度不足的时候调整一下左偏移值就可以了，红色relative, 蓝色可点击区域absolute这样不就可以找好位置么？

话说现在怎么还有这么奇葩的需求- - 整个一张背景图上面找地方做可点击热点，不考虑hover或者active时候的变化么。。

======================
内容主体宽度是固定的吧？

背景上内容主体部分加相对定位，然后可点击部分用绝对定位控制就OK。