保持元件

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