Question

我非常擅长使用html和css进行编码，并且想知道如何解决使用像素定位图像的问题。代码片段如下所示：

＆＃xA;＆＃xA;

  #contact .map .box_wrapp {＆＃xA; position：absolute;＆＃xA; left：670px;＆＃ xA; margin：0;＆＃xA; box-shadow：0 0 7px 0 rgba（26,26,26,0.4）;＆＃xA;填充：33px 0 33px;＆＃xA;背景：白色;＆＃xA ; top：41％;＆＃xA; border-radius：25px;＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

在不同的网页上查看时屏幕“670px”是一个不同的距离，它最终与同一页面上的另一个图像重叠。如何将其相对于另一个图像定位或者使用像设备像素这样的位置？（我开始编写Android应用程序，所以设备像素的概念对我来说很熟悉。）

＆＃xA;

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

}

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

Answer 2

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

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

2 个答案: