3个媒体查询iphone的肖像，风景和ipad肖像

我试过了不同的组合width & device-width但在横向上的iPhone这个代码永远不会变成背景红色;3个媒体查询iphone的肖像，风景和ipad肖像

我有问题，当我有超过1媒体查询。看到这个JSfiddle example股利背景是永远的绿色，除非你删除最后一个媒体查询

这是我想它针对3个不同的媒体查询：

智能手机和平板电脑（人像只）。这将是在那里我有一个响应式布局我所有的通用风格

宽度：320像素 - 479px - 这将适用于小屏幕，如肖像iPhone只

宽度：480像素 - 640像素 - 这将适用于大屏幕如横向的iphone和纵向的ipad。不是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/

来源

2012-12-17 John Magnolia

你自己尝试修改

@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; 
    } 
}

来源

2012-12-23 17:33:33

请注意，逗号'，'作为'OR'，'和'作为'和'使用，因此您可以随时组合媒体查询。 –

@media只有屏幕和（最大设备宽度：480px）和（方向：风景） - 不适用于iPhone风景，不被识别 – drogon

嗨，我在iOS 6，iPhone 4，媒体查询“iPhone风景”对我来说不起作用，其余的作品 – drogon

在这个资源看看，会给你几乎一切http://arcsec.ca/media-query-builder/媒体查询，你必须要指定一个最小宽度以及。也少了！重要的，肮脏:)

你的情况

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

来源

2012-12-17 08:01:06 Richlewis

谢谢虽然我看过链接，但所有他们选择只是混淆。我必须使用'！important'，因为它用于HTML电子邮件，我需要覆盖内联样式。 –

媒体查询还支持设备的方向。你应该尝试的

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

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

您也可以与宽度将它们组合起来，像这样

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

}

来源

2012-12-17 08:07:01 kernelpanic

方向媒体查询不适用于iPad和iPad mini :(... –

响应电子邮件可以是艰难的，因为有这么多的电子邮件客户端在那里，并支持可有限媒体查询。您可能只想考虑让百分比变得流畅，所以它们会扩展，而不是媒体查询。 zurb的人有一些很棒的模板可以帮助你。 http://www.zurb.com/playground/responsive-email-templates

希望有所帮助。

来源

2012-12-20 12:05:47 mToce

我通过在DIFF使用嗡的解决方案尝试这样做。它希望它可以帮助别人

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

来源

2017-11-02 17:40:49 sahil

这是我的全部答案： - @ media only screen and（max-device-width：1024px）and（orientation：portrait）{*} */ }只有 } @media屏幕（最大设备宽度：1,024）和（方向：横向）{ /* *风格/ } – sahil

请帮我修改我的answere！ – sahil

3个媒体查询iphone的肖像，风景和ipad肖像

回答

相关问题