html - 使用 px 在 CSS 中定位图像，根据显示器分辨率给出不同的结果

Question

我对使用 html 和 css 进行编码非常陌生，想知道一种方法来解决使用像素定位图像的问题。代码片段如下所示:

#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;
}

在不同屏幕上查看页面时，“670 像素”是不同的距离，它最终会与同一页面上的另一张图片重叠。我怎样才能相对于其他图像定位它或者可能使用设备像素之类的东西定位它？ (我开始编写 Android 应用程序，所以我很熟悉设备像素的概念)。

Answer 1

您可以使用媒体查询并为每个监视器定义不同的样式。 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

此部分适用于最大宽度为 300px 的显示器，请根据您支持的设备设置几个

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

但更好的方法是使用百分比而不是像素来设置宽度