媒体查询 - 移动版与桌面浏览器 [英] Media Queries - Mobile vs Desktop Browser

问题描述

我看到许多在桌面浏览器和手机浏览器上都有响应的网站，我在一个网站上工作，我有以下样式表设置：（Hicks Design网站是我想要实现的一个很好的例子，如果您需要一个）

I have seen many sites that are responsive both on desktop browsers and mobile phone browsers, I am working on a site and I have the following stylesheet setup: (The Hicks Design website is a good example of what I want to achieve if you need one)

/* Normal styles go here */

@media screen and (min-device-width:321px)
{
    /* Styles */
}
@media screen and (min-width:701px)
{
    /* Styles */
}
@media screen and (min-width:1025px)
{
    /* Styles */
}
@media screen and (min-width:2049px)
{
    /* Styles */
}

但是，我的样式表只是似乎在桌面浏览器上工作。 （使用Android Firefox和Sony Xperia Ray上的默认Android浏览器进行测试）

However my stylesheet above only seems to work on desktop browsers. (tested with Android Firefox and the default Android browser on a Sony Xperia Ray)

Hicks设计网站的规则与我们的规则非常相似，但是他们利用最小和最大但对我来说，似乎并不适用于移动和桌面浏览器。 （我计划优化我的媒体查询更多，我只是想让基本功能，我想他们在目前）。

The Hicks design site's rules are very similar to mine, however they make use of min and max but either for me doesn't seem to work on both mobile and desktop browsers. (I plan on optimizing my media queries more I am just trying to get the basics to function as I want them to at the moment).

如果我使用max-device -width而不是max-width会在移动浏览器上响应，而不是桌面浏览器...

If I use max-device-width instead of max-width it becomes responsive on mobile browsers, but not desktop browsers...

我已经尝试下面的方法来解决这个问题： p>

I have tried the following following to get around the issue:

@media screen and (max-width:480px), screen and (max-device-width:480px)
{
    /* Styles */
}

也：

@media screen and (max-width:480px), and (max-device-width:480px)
{
    /* Styles */
}

但是我不认为这两个都是正确的因为Firefox的Web开发人员工具栏抱怨它。我也尝试了上述规则的一些变化，但仍然不能让它工作。

However I don't think either of these are correct as the web developer toolbar for Firefox complains about it. I have also tried a few variations on the above rules but still can't get it to work.

根据我的理解max-width读取视口宽度（说。浏览器窗口的宽度）和max-device-width读取您用于查看网站的屏幕的实际宽度。 - 我很困惑为什么max-width似乎没有读取手机的浏览器宽度。

From what I understand max-width reads the viewport width (say.. .the width of the browser window) and max-device-width reads the actual width of the screen you are using to view the site. - I'm confused why max-width doesn't seem to read the mobile's browser width.

我想我可能错过一些明显的媒体查询在这里。 。似乎没有意义，如果我想我的网站在桌面和移动浏览器响应，我必须制作一个所有我的媒体查询的副本，只需更改查询从屏幕和（最大宽度）到屏幕和（max-device-width）'，反之亦然。

I think I'm possibly missing something obvious about media queries here... It doesn't seem to make sense that if I want my site responsive on desktop and mobile browsers I must make a copy of all of my media queries and just change the query from 'screen and (max-width)' to 'screen and (max-device-width)' or vice versa. (which I'm ashamed to even type as a workaround here)

如何组合（max-width）和（max-device-width）规则或如何我可以实现这个吗？

How can I combine the (max-width) and (max-device-width) rules or how can I achieve this?

如果你不想读所有上述内容：

If you'd rather not read all of the above:

@media screen和（max-width：480px）但是似乎只有@media屏幕和（max-device-width：480px）在手机上工作。如何结合这两条规则，在移动设备和桌面浏览器上实现响应式设计？

I am using @media screen and (max-width:480px) however it seems only @media screen and (max-device-width:480px) works on mobiles. How can I combine both of these rules to achieve a responsive design on mobile and desktop browsers?

推荐答案

如果只想使用其属性选择，请使用 all 关键字：

There are a lot of medias out there, and if you want to select only by its properties, use the all keyword:

@media all and (max-width:480px)
{
    /* Styles */
}

编辑：

将组合规则与或：

@media all and (prop1:val1), all and (prop2:val2)
{
    /* Styles */
}

将组合规则与和：

@media all and (prop1:val1) and (prop2:val2)
{
    /* Styles */
}

这篇关于媒体查询 - 移动版与桌面浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！