iPhone竖屏、横屏和iPad竖屏的3个媒体查询

Question

iPhone竖屏、横屏和iPad竖屏的3个媒体查询

6

我尝试了不同的宽度和设备宽度的组合，但在iPhone横向时，此代码从未将背景变为红色;

当我有多个媒体查询时，出现问题。查看此 JSfiddle示例，除非您删除最后一个媒体查询，否则div背景永远不会变成绿色

这就是我想要的3个不同媒体查询的目标：

智能手机和平板电脑（仅限竖屏）。这是我所有响应式布局通用样式的地方

宽度：320像素 - 479像素 - 这将适用于小屏幕，如仅限竖屏的iphone

宽度：480像素 - 640像素 - 这将适用于更大的屏幕，例如仅限横屏的iphone和仅限竖屏的ipad。

请注意，这是用于HTML电子邮件的，因此无法使用JS。

@media only screen and (max-width: 640px) {
    body { padding: 10px !important }
}
/* Small screen */
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) {
    body { background: blue !important }
}
/* iPhone landscape and iPad portrait */
@media only screen and (max-device-width: 480px) and (max-device-width: 640px) {
    body { 
       background: red !important 
       -webkit-text-size-adjust:none; 
    }
}

参考: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

该网页提供了针对标准设备的CSS媒体查询代码段。使用这些代码段，您可以根据设备屏幕大小和方向调整页面布局和样式。这对于开发响应式网站非常有用，以确保在不同的设备上都能够得到最佳的用户体验。

- John Magnolia

5个回答

3

媒体查询也支持设备方向。你应该尝试一下。

@media screen and (orientation:portrait) {
    /* Portrait styles */
}

@media screen and (orientation:landscape) {
    /* Landscape styles */
}

您可以像这样与宽度结合使用。

@media screen and (max-device-width : 320px) and (orientation:portrait) {

}

- kernelpanic

1

响应式电子邮件可能会很棘手，因为有很多电子邮件客户端，并且对媒体查询的支持可能有限。您可能只想考虑使用百分比使您的divs流动起来，这样它们就可以缩放，而不是使用媒体查询。Zurb的人们有一些很棒的模板，也许可以帮助您。http://www.zurb.com/playground/responsive-email-templates

希望这有所帮助。

- mToce

1

看看这个资源，它会为您提供几乎所有http://arcsec.ca/media-query-builder/的媒体查询，您还需要指定最小宽度。此外，尽量少使用!important和dirty :)

在您的情况下

@media only all and (min-device-width: 320px) and (max-device-width: 480px) {
/* insert styles here */
}

- Richlewis

谢谢，虽然我已经看了链接，但所有的选择都让人困惑。我必须使用!important，因为这是用于HTML电子邮件的，我需要覆盖内联样式。 - John Magnolia

0

我尝试了Om的解决方案，并用不同的方式实现了它，对我有用，希望能帮助到其他人

@media only screen and (max-device-width:1024px) and (orientation: portrait)     {
    /*style*/    
    }
@media only screen and (max-device-width: 1024px) and (orientation: landscape)  {
    /*style*/
}

- sahil

这是我的完整答案：@media only screen and (max-device-width:1024px) and (orientation: portrait) { /样式/
} }@media only screen and (max-device-width: 1024px) and (orientation: landscape) { /样式/ } - sahil

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Om Shankar · Accepted Answer

你自己的尝试已经被修改。

@media only screen and (max-width: 640px) and (orientation: portrait) {
    body { padding: 10px !important }
}

/* Small screen */
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) and (orientation: portrait) {
    body { background: blue !important }
}

/* iPhone landscape and iPad portrait */
@media only screen and (max-device-width: 480px) and (orientation: landscape),
@media only screen and (max-device-width: 640px) and (orientation: portrait)  {
    body { 
       background: red !important 
       -webkit-text-size-adjust:none; 
    }
}