Question

我制作了一些网站，但由于某些原因，我的最新网页在移动浏览器上渲染不正确。我觉得它与我用于间距（像素）的单位有关，但我不确定。

网页是www.zfisch.com

以下是相关代码的一些片段，首先是视口：

<meta name="viewport" content="width=500, initial-scale=1">

接下来，我为图像设置了CSS：

a #twitter {
    background-color: black;
    height: 32px;
    width: 110px;
    border-radius: 6px;
    position: relative;
    margin-left: 46%;
    top: 159px;
    z-index: 1;
}


a #email {
    background-color: black;
    height: 32px;
    width: 110px;
    border-radius: 6px;
    position: relative;
    margin-left: 46%;
    top: 159px;
    z-index: 1;
}

img[src="zack.jpg"] {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    border: 3px solid white;
    margin-top: 100px;
    left: 44.5%;
    position: absolute;

}

p[id="brackets"] {
    font-size: 100px;
    left: 43%;
    position: absolute;
    margin-top: 100px;


}

如果有人能指出我正确的方向，我真的很感激。谢谢！

Answer 1

绝对位置不是最好的方法，但如果你想坚持下去尝试这样的设置：

img[src="zack.jpg"] {
    left: 50%;
    margin-left: -75px;
}

对于其他元素，请执行相同操作（将它们的左半部分拉宽）并确保设置宽度。

否则，请移除定位并将容器设置为text-align: center以使图像居中。

图像偏离中心以进行移动浏览

1 个答案: