有时候我们会使用锚点定位，如果此时头部菜单我们设置成固定到头部，那么我们在使用锚点定位的时候，定位到的页面位置就会向上偏移了。为此我们给出了以下自适应解决方案：
假设桌面端固定头部的高度为130px，手机端无固定头部。
链接为：
<a href="https://www.zhuxiong.com/portfolio#GRAPHICDESIGN" target="_blank" rel="noopener noreferrer">定位锚点</a>
锚点为：
<a class="target-fix" id="GRAPHICDESIGN"></a>
我们给锚点添加一个class
target-fix 样式为:
/*暗锚，让它滚动上来的时候在实际位置的基础上向下偏移130px*/
@media (min-width: 992px){ /*桌面适应*/
.target-fix {
position: relative;
top: -130px; /*偏移值*/
display: block;
visibility: hidden; /*不让它展示*/
}
}
@media (max-width: 992px){ /*手机适应*/
.target-fix {
position: relative;
top: -0px; /*偏移值*/
display: block;
visibility: hidden; /*不让它展示*/
}
}
@media (min-width: 992px){ /*桌面适应*/
.target-fix {
position: relative;
top: -130px; /*偏移值*/
display: block;
visibility: hidden; /*不让它展示*/
}
}
@media (max-width: 992px){ /*手机适应*/
.target-fix {
position: relative;
top: -0px; /*偏移值*/
display: block;
visibility: hidden; /*不让它展示*/
}
}
这样就可以解决偏移问题了，学名叫 暗锚 ，涨知识了吧！
