Question

当我在大屏幕上显示某些项目时，我在网页上的某些项目的位置会略微移动，并且在小屏幕上显示它们稍微偏离位置，反之亦然。

这从来没有发生过我，但这也是我在asp.net开发的第一个网站，这里是我的CSS

#backb{
  position:absolute;
  left :22%;
  bottom:10%;
 }

#backf{
  position:absolute;
  left :12%;
  bottom:0%;
 }

#avatar{
  position:absolute;
  left :55%;
  bottom:45%;
 }

Answer 1

在设计页面时没有最好的定位。您应该使用跨浏览器和不同系统交叉兼容的技术。

在CSS中，您正在使用

position: absolute;

使用此样式时，元素相对于其第一个定位的祖先元素定位。因此，默认情况下，其位置将相对于<body>的位置。

接下来，您使用percentage(%)值来指定元素的不同位置。此值由浏览器根据第一个相对定位的祖先计算，默认情况下也是<body>，因此每次分辨率更改时，模板都会相应地移动。

现在，我的一些指示。

除非绝对必要，否则请勿使用position:absolute。
使用百分比％值始终会导致流体产生，因此如果您不知道如何处理它，请不要使用它。

Answer 2

CSS的问题在于您使用百分比。如果您知道正在使用X％的容器，则仅使用百分比，实际上可以被该数字整除。也许你可以尝试使用固定宽度。我也同意之前的评论：尽量避免位置：绝对特别是布局的主要组成部分。

在为多年的coulpe编写CSS之后，我发现我和我的同事一遍又一遍地重新发明轮子并在所有不同的浏览器上测试主要布局是一个痛苦的屁股。我们的结论是，信任社区和标准化框架要容易得多。它不适用于100％的网站，但如果你为许多不同的客户编写CSS，它将足以超过90％的时间。我看了几个不同的框架，让我的公司有超过35人标准化了新版本的YAML（http://www.yaml.de/）。它已经多次加快了开发速度，但是不要接受我的话。看看他们的优秀教程。我真的很棒。欢呼声。

处理网站定位的最佳方式

2 个答案: