html - 文本位置从桌面屏幕更改为移动屏幕

Question

文本(instagram 和商店)向下移动到黑色区域，如下图所示 https://imgur.com/a/zevB8Op

代码如下:

HTML

<div id="rightBlock">
    <a target="_blank" href="http://instagram.com/pierrebassene.world" style="text-decoration: none; color: black; font-weight: bold; font-family: Helvetica ;font-size: 2vw ;">INSTAGRAM</a>
</div>

<div id="mid">
    <a style="font-family: Helvetica ; font-weight: bold; font-size: 2vw;">SIGN UP </a>
</div>

CSS

#rightBlock {
    position: fixed;
    top: 90%;
    left: 45.2%;
    bottom: 0;
    right: 0;
    z-index: 1;
}

#mid{
    position: fixed;
    top: 82%;
    left: 47%;
    bottom: 0;
    right: 0;
    z-index: 1;
}

我已经尝试了几种方法，包括绝对定位和固定定位，但似乎没有任何效果:/

Answer 1

原因几乎可以肯定是由于在“top”属性中使用了百分比值(没有更多上下文代码无法确认)。而是尝试重新编写/重新构建您的代码，这样您就不会使用相对于设备屏幕尺寸会发生变化的百分比值。
您可以尝试切换到像素值。例如:

margin-top: 200px;//替换为所需的px值

此外，在您的代码中强制执行“关注点分离”概念是一个好习惯。
HTML 是描述页面结构并包含页面实际内容的标记语言。 CSS 用于设置页面内容的样式。
我建议您将所有样式属性移动到您的 CSS 中。这使您的 HTML 保持干净，并且在将来更易于阅读/维护，同时还明确了在何处修改样式更改，因为所有样式都在一个位置定义(CSS 样式表 - 而不是 CSS 样式表和/或 HTML 样式属性)。