IMG水平地在PC上，但不是在电话 - 媒体查询 [英] IMG centers horizontally on PC but not on phone - media queries

问题描述

我有这个网页，它现在只有一个图像，但由于我很新的，我认为这将是足够的。在正常的桌面屏幕上，我想让图像左对齐。这就是它。但是当它处于纵向模式，并且最大宽度为480像素时，我希望图像居中，水平。

I have this page, it only has an image on it right now but since I'm pretty new to this I thought that would be enough. On a normal desktop screen, I want the image to be left-aligned. And that's how it is. But when it's in portrait mode, and the max-width is 480px, I want the image to be centered, horizontally.

我的代码是：

@media (max-width: 480px)
{
    img
    {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

现在，上面的代码在电脑上工作得很好。当我的电脑处于横向模式，且最大宽度大于480像素时，图像左对齐。当我把我的电脑在纵向和收缩浏览器窗口的宽度小于480像素的图像变得居中。

Now, the above code works great on the computer. When my PC is in landscape mode and the max-width is greater than 480px, the image is left-aligned. And when I put my PC in Portrait and Shrink the browser window's width to less than 480px the image becomes centered.

但这不适用于我的手机。我的手机宽度为480像素。为什么不是工作呢？我不明白。

But this does not work on my phone. My phone's width is 480px. Why isn't is working then? I don't understand.

推荐答案

这将有助于（对我来说） - http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html 。
视口，宽度和设备宽度令人困惑 - 使用乘法器和其他东西 - 这篇文章似乎解释了它们。

This will help (it did for me) - http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html. Viewports, widths and device widths are confusing - with multipliers, and other things in place - this article seemed to explain them.

这篇关于IMG水平地在PC上，但不是在电话 - 媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！