javascript - HTML 屏幕分辨率

Question

我在网页上遇到像素问题。我的身体上有封面图片，上面有按钮。当页面确实调整大小时，按钮也在移动。即使屏幕发生变化，我也想将按钮留在我放置的位置。我也在尝试在移动设备上移植网站，这就是我遇到这个问题的原因。PS我是网络编程的新手。

<html>
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
        <title>test page.</title>
        <style>
            body {
                background:url("test.jpg");
                background-size: cover;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
            }
            #mybutton {
                position: absolute;
                right:800px;
                top:300px;
            }
        </style>
    </head>
    <body>
        <button id="mybutton" onClick="javascript:alert('clicked!');">Click Me!</button>
    </body>
</html>

score 0 · Accepted Answer

将 css 属性位置设为 mybutton 的固定位置。

         #mybutton {
            position: fixed;
            right:800px;
            top:300px;
        }

score 0 · Accepted Answer

试试这个家伙..固定位置是最好的方法。如果你使用绝对按钮，当你滚动页面时，按钮会上升。

对：0；顶部：0；

将帮助您的按钮保持右上角..

 #mybutton {
            position: fixed;
            right:0;
            top:0;
            width:100px;//what u want
            height:30px;//what u want
        }

如果您想从顶部和右侧获得一些边距，请使用此

right:100px;//你想要什么

top:100px;//你想要什么

score 0 · Accepted Answer

我认为你应该使用left而不是right.

绝对元素将针对位置是相对的第一个父元素定位。

所以你可以有一个位置是绝对的按钮。最重要的是，会有一个 div 的位置是相对的。然后你可以给你的按钮位置，相对/反对那个div。

尽管屏幕大小如何，这将是固定的。

小提琴

score 0 · Accepted Answer

好吧，我相信你让自己在这里感到困惑。所以position: absolute;说：

相对于浏览器窗口的右上角定位此元素

所以如果浏览器窗口调整大小，那么你的位置就会改变。我认为您实际上应该采取的方法是限制“画布”的大小。即这是背景图像有多大，所以我要保持我的“画布”这个大小，即

http://jsfiddle.net/bLUhL/1/

如果您在此小提琴中调整屏幕大小，您会看到按钮相对于“画布”保持在相同的位置，并且始终位于中心。

然后，您可以使用边距定位按钮：

input
{
 margin-left:200px;
    margin-right:300px;
}

score 0 · Accepted Answer

尝试根据您的需要进行调整：

#mybutton {
    position: fixed;
    right: 150px;
    top: 49%;
    display: block;
}

或者，换句话说，使用 position:fixed

javascript - HTML 屏幕分辨率

5 回答 5

Related

Reference