保持元件

Question

的边缘我有一个元件与屏幕尺寸1440px =为约16.8％的

margin-left:241.5px 

位置。

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

我想弄清楚我能做些什么动态地让它发生，所以我不必为每个屏幕大小调整它。

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

有没有办法如何动态地进行此定位？

它很难刺激的demo，但是我想

<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

没有脚本，您只能使用@media屏幕CSS

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

Answer 2

没有看到您的标记/ 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 3

与媒体结合使用CSS变量你唯一的选择查询这种方法的

• 好处是，你不需要写CSS为每个类只为变量在里面使用像关键变量，并在类内使用该变量

@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); 
 
}

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

Browser Support