0

我知道有很多关于媒体查询的话题,但今晚我被困在这个问题上:

我的目标是许多智能手机,特别是三星 Galaxy S3:

@media screen and (max-device-width: 720px), (min-device-width: 721px) { .. }

它适用于肖像和风景!但我不知道为什么,这样我也瞄准了Ipad 横向模式,我不想这样做!如果我更喜欢将 Ipad 的纵向视图与智能手机一起定位!明确地说,我想要实现的是有 2 个版本的网站,默认是最大宽度 960px 的布局和一个更小的版本,非常适合智能手机,也适合 Ipad 和其他平板电脑纵向.. 现在移动版在智能手机上运行,​​但在 Ipad 上几乎没有......

我知道我可以直接针对 Ipad,但我不想复制许多与桌面相同的 css 规则!

4

1 回答 1

0

问题似乎与您的媒体查询的语法有关。您使用了逗号而不是,and我认为您的最大/最小方式错误。对于 CSS 媒体查询,a,是 OR 分隔符,而AND需要多个查询为真。

您的媒体查询应如下所示:

@media screen and (min-device-width: 720px) and (max-device-width: 721px) { .. }

或者写得更简洁,你可以使用特定的device-width

@media screen and (device-width: 720px) { .. }

使用此方法,您可以使用逗号定位 Galaxy S3 纵向和横向,即:

@media screen and (device-width: 720px), (device-width: 1280px) { .. }

于 2013-01-14T03:49:01.997 回答