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

你可以尝试一下'＆＃39;媒体查询＆＃39;

这是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设置为所有屏幕尺寸的set属性。

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

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

Answer 2

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

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

CSS定位因屏幕而异？

2 个答案: