定位使用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给人根据显示器分辨率

回答

相关问题