Question

我有一个位置为

的元素

margin-left:241.5px

屏幕尺寸1440px =约16.8％。

但是，对于1920的屏幕尺寸，它应该是473px。

我想弄清楚我能做些什么来动态地实现它，所以我不必为每个屏幕尺寸调整它。

我尝试使用margin-left和％但它不起作用，与EM相同。

有没有办法动态地进行这种定位？

很难激发演示，但我试过

<div class="about"> 
    <p>01</p>


</div>
html,*{
    padding:0;
    margin:0;
}
html{
    height: 100%;
}
body{
    height: 100%;
    width: 100%;
}
.about{
    width: 100%;
    height: 100%;
    background: url(http://66.media.tumblr.com/4bb5538edf278f7e83d8275e60550433/tumblr_msefuouXB81s9yt1no1_500.png) no-repeat;
        background-size: 1158.6px 163px;
        background-position: top 172px left 149px;
        position: absolute;
}
.about p{
    margin-top: 78.3px;
        margin-left: 16.8%;
        font-size: 22px;
        position: absolute;
        color: #CECED2
}
.about h6{
    margin-top: 101.3px;
        margin-left: 241.5px;
        font-size: 22px;
        position: absolute;
        color: #151416;
}

Answer 1

~~没有看到你的标记/ CSS使得检测任何缺陷变得更加困难，并且百分比有效（如下所示），如果你没有得到预期的结果，可能会有一些干扰你的东西。~~

随着百分比的工作（见下文），您可能还会想到与其相关的其他内容，例如背景图像。更新您的问题，我将能够解决并添加到我的答案中。

下面示例中的左边距在第一个中为120px，在第二个中为60px，显示20％的值确实有效。

.parent { width: 600px; margin: 10px 0; background: #ccc; } .parent + .parent { width: 300px; } .child { width: 200px; height: 30px; margin-left: 20%; background: red; }

<div class="parent"> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> </div>

Answer 2

没有脚本，您只能在css中使用@media屏幕

@media screen and (max-width: 1920px) {
   #your-tag{margin-left:473px}
}
@media screen and (max-width: 1440px) {
   #your-tag{margin-left:241.5px}
}

Answer 3

您唯一的其他选择是将css变量与媒体查询结合使用

这种方法的好处在于，您不需要为每个类编写css，只需为其中使用的变量（如关键变量）编写，并在类中使用该变量

＆＃13;

@media screen and (max-width: 480px) and (min-width: 120px) {
  :root {
    --main-margin-one: 48px;
    --main-margin-two: 58px;
  }
}
@media screen and (max-width: 720px) and (min-width: 480px) {
  :root {
    --main-margin-one: 72px;
    --main-margin-two: 82px;
  }
}
@media screen and (max-width: 920px) and (min-width: 721px) {
  :root {
   --main-margin-one: 92px;
   --main-margin-two: 102px;
  }
}
@media screen and (max-width: 1441px)and (min-width: 920px) {
  :root {
    --main-margin-one: 241.5px;
   --main-margin-two: 251.5px;
  }
}
@media screen and (max-width: 1921px)and (min-width: 1441px) {
  :root {
   --main-margin-one: 440px;
   --main-margin-two: 450px;
  }
}
.className1 {
  width: 100px;
  height: 30px;
  background: red;
  margin-left: var(--main-margin-one);
}
 
.className2 {
  width: 100px;
  height: 30px;
  background: green;
  margin-left: var(--main-margin-two);
}

＆＃13;

<div class="className1"></div>
<div class="className2"></div>

＆＃13;

Browser Support

保持元素的边缘

3 个答案: