定位使用PX給人根據顯示器分辨率

不同的結果CSS的圖像，我非常新的HTML和CSS編碼，並想知道一個辦法讓我的周圍使用定位像素的圖像的問題。的代碼段看起來像：定位使用PX給人根據顯示器分辨率

#contact .map .box_wrapp{ 
position: absolute; 
left: 670px; 
margin: 0; 
box-shadow: 0 0 7px 0 rgba(26, 26, 26, 0.4); 
padding: 33px 0 33px; 
background: white; 
top: 41%; 
border-radius: 25px; 
}

當查看的網頁上不同的屏幕「670px」是一個不同的距離，並且它結束了在同一頁上重疊另一圖像。我怎樣才能將它定位在相對於其他圖像的位置，或者可能使用像素像素來定位它？（我開始編程Android應用程序，所以設備像素的概念對我來說很熟悉）。

來源

2015-06-21 Omar Samara

絕對位置元素相對於未靜態定位的第一個父元素進行定位。你所展示的代碼還不足以作出決定性的答案，但我的猜測是這些元素的父元素不是固定寬度，你所說的其他圖像也不是像這些元素一樣的絕對位置。如果你不熟悉定位，你應該閱讀它們，因爲它們是那些沒有定位的主要原因。 –

您可以使用媒體查詢併爲每個顯示器定義不同的樣式。 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

本節將顯示器達上，根據您所支持的設備

@media (max-width: 300px) { 
{ 
#contact .map .box_wrapp{ 
left: 670px; 
margin: 0; 
box-shadow: 0 0 7px 0 rgba(26, 26, 26, 0.4); 
padding: 33px 0 33px; 
background: white; 
top: 41%; 
border-radius: 25px; 
}

}

但更好的方法設置幾個這種適用於300像素寬度你是設置寬度使用百分比不是像素

來源

2015-06-21 19:55:25

等等，我可以將圖像設置爲屏幕長度的75％嗎？這樣它在每個屏幕上看起來都有所縮小？我不是在談論圖像的大小，但它的位置 –

是的，看到這個http://stackoverflow.com/questions/11478163/set-div-top-position-as-percentage-of-browser-width -define高度位置按瓦特 –

Try using css @media rule, this is used to define different style rules for different media types/devices. 

e.g 

@media only screen and (max-width: 670px) { 
    #contact .map .box_wrapp{ { 
     //some style 
    } 
} 

@media only screen and (min-width: 350px) { 
    #contact .map .box_wrapp{ { 
     //some style 
    } 
}

來源

2015-06-21 19:59:36

定位使用PX給人根據顯示器分辨率

回答

相關問題