HTML显示分辨率

Question

我一直在this网站上查看@media并试图这样做。

@media screen and (max-width: 1350px;)
{
    #td6img{margin-left:400px;}
}

我很确定默认分辨率是1360px，当我调整窗口大小时，图像似乎不会移动但保持在同一个位置。这是调整大小之前图像的CSS

#td6img
{
    display:block;
    margin-left:410px;
}

CSS在调整大小时似乎没有改变。我不知道我是否将宽度设置得太大，或者我是否对@media

做错了

我会用什么来移动图像的位置？我也试图对其他元素这样做，而不仅仅是这个。

Answer 1

以下是简单媒体查询的示例：

img {
  width: 200px;
  @media (min-width:800px) {
    width: 400px;
  }
}

在此示例中，img默认情况下为200px宽。当屏幕宽度达到800px时，图片将调整为400px。这是一个＆＃34;移动优先＆＃34;方法，因为默认CSS适合较小的设备。

<小时/>

对于您的示例，如果您有元素#td6img，则可以通过以下方式更改边距。

#td6img {
  margin-left: 410px;
  @media (min-width: 1350px) {
    margin-left: 400px;
  }
}

当屏幕宽度达到margin-left时，这会更改1350px。否则，margin-left值将为410px。

请注意，除非您使用Javascript定位元素，否则将id用于元素通常是不好的做法。你应该使用类。

Answer 2

删除媒体查询中的分号（;）

@media screen and (max-width: 1350px)
{
    #td6img{margin-left:400px;}
}

Answer 3

首先，您应该从媒体查询中删除分号

@media screen and (max-width: 1350px) {
    #td6img { margin-left: 400px; }
}

您还可以使用浏览器的检查程序来确定浏览器视口的大小。 1350px非常大，所以要确保你的视口实际上很大。此外，看起来该元素在到达该断点时仅移动10px，这可能很难被注意到。