HTML 显示分辨率

Question

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

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

我很确定默认分辨率是 1360 像素，当我调整窗口大小时，图像似乎没有移动，而是停留在同一个地方。这是调整大小之前图像的 CSS

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

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

做错了什么

我会用什么来移动图像的位置？我也在尝试对其他元素执行此操作，而不仅仅是这个。

Answer 1

这是一个简单的媒体查询示例:

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

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

---

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

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

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

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