CSS 定位因屏幕而异？

Question

我正在尝试让一个徽标在屏幕上有一个静态位置，比如从顶部开始水平居中的 40px。当我尝试这个时，它起作用了。但是，定位因屏幕尺寸而异。我怎样才能让所有屏幕都保持静态？

我的代码：

<html>
<head>

<style type="text/css">

body{
    background-image: url("images/bg.jpg");
    background-color: #844903;
    }
    .logo{
    position: fixed;
    top: 40px;
    right: 850px;
    }
    h1{
    position: fixed;
    top: 250px;
    right: 720px;
    color: #a86b00;
    }  
    .rf_id{
    position: fixed;
    top: 50%;
    right: 50%;
    }  
    </style>

<title></title>
</head>

<body>
    <h1>Welcome, Please scan your studentcard:</h1>

<div class="logo"><a href="index.html"><img src="images/logo.jpg" alt="logo" </a></div>


<button class="rf_id" type="submit" style="border: 0; background: transparent"><a href="index1.5.html"><img src="images/rf_id.jpg" alt="submit"/></a></button>

</body>
</html>

Answer 1

使用像素来定位一些元素是很棘手的，因为在移动屏幕中有不同的密度（1x、2x、1.5x、...），所以在密度为 2x 的屏幕中，一个 1 像素并不是真正的 1px。

我建议您使用 em 进行布局，或者如果可以，使用新的 css3 尺寸：vh 和 vw。

Answer 2

您可以试试所谓的 'media query'

这是 CSS 的一部分，可以根据屏幕尺寸为您的 html 设置不同的 css。

示例 1：

@media (max-width: 600px) {
  .logo{
    position: fixed;
    top: 40px;
    right: 850px;
  }
}

这意味着如果屏幕尺寸小于 600px .logo 将设置属性。

示例 2：

@media all {
  .logo{
    position: fixed;
    top: 40px;
    right: 850px;
  }
}

这将在所有屏幕尺寸上将 .logo 设置为设置属性。

您可以组合使用这些 media query 以获得所需的效果。

阅读更多相关信息：
https://css-tricks.com/css-media-queries/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

CSS 定位因屏幕而异？

CSS positioning varies per screen?

html

css

positioning