Question

我有一个客户端网站，我正在他们希望它在960px +处看一眼，然后以959px向下看另一种方式。

基本上，我们都习惯使用平滑缩放，一旦它低于960px，它就会跳到iPhone上的样子，无论你是745px还是320px。

所以我做的是：

@media only screen and (min-width: 960px) and (max-width: 1366px){}
@media only screen and (min-width: 320px) and (max-width: 959px)

当我使用Window Resizer进行镀铬并转到960时，它看起来很好，768，它看起来很破碎。我最初有：

@media only screen (max-width: 960px){}
@media only screen (max-width: 480px){}

在480px它看起来很完美，正是我想要的。但是，当我第一组媒体查询时，它就像我在这里一样。当我在我的iPhone上尝试它时，同样的故事。就像它不存在一样。

任何想法我怎么说：在960+你看起来像这样，在959px及以下，你看起来像这样 - 基本上＆＃34;跳跃＆＃34;看起来之间。

更新

因此，考虑到人们发布的内容，我更新了问题以反映这些变化。但问题仍然是960，它有点破碎，可能是我。但在768时它彻底破碎了。

在480它真的坏了，当我刷新屏幕跳转到我希望它看的地方然后回到破碎的状态。

Answer 1

也许我只是高，但看起来它不能工作，因为......最大宽度为320px的最大宽度为959px

所以只需改变

 @media only screen and (min-width: 959px) and (max-width: 320px){}

到

 @media only screen and (min-width: 320px) and (max-width: 959px){}

依旧......

Answer 2

要实现＆＃34; ......他们希望它在960px +处看起来是单向的，然后在959px处向下看另一种方式＆＃34;你只需要一个媒体查询，因为那里只有一个断点。

因此，首先要为959px及以下的屏幕尺寸编写所需的所有样式。

然后，在下面添加媒体查询：

@media only screen and (min-width: 960px) {...}

在较小的屏幕尺寸下，这将使用媒体查询之前声明的所有默认样式。但对于960px或更高的屏幕，媒体查询中声明的任何属性都将覆盖默认样式中的相同属性（假设它们具有相同的CSS特性，因此请小心）。

但是，这是非常重要的，但请记住，并非每个人都以相同的文字大小运行。许多视力不佳的人将使用纯文本缩放功能，并且您希望媒体查询的行为与您编写的一样，或者可能会产生各种不需要的效果。要实现这一点（它是可访问性的一部分），只需以em为单位而不是以px为单位指定断点： -

假设您使用的是通常的默认大小16px，那么960px = 960/16 = 60em。因此，您的媒体查询现在变为：

@media only screen and (min-width: 60em) {...}

希望这有帮助。