相关疑难解决方法(0)

我写了一些CSS代码,使HTML页面更适合移动浏览器.为了确保我的CSS仅适用于手机,我使用以下媒体查询:

@media only screen and (max-device-width: 480px)

作为一名iPhone开发人员,我在这台设备上进行了测试,效果非常好.但我希望我的CSS可用于所有类型的设备(Android,Windows Phone等).

什么是适合当今大多数智能手机的好分辨率？或者我需要更复杂的媒体查询？

我尝试了不同的width&组合,device-width但是在横向上这个代码永远不会把背景变成红色;

当我有多个媒体查询时,我遇到了问题.看到这个JSfiddle示例,除非删除最后一个媒体查询,否则div背景永远不会是绿色

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

1. 智能手机和平板电脑(仅限肖像).这将是我拥有响应式布局的所有通用样式的地方
2. 宽度:320px - 479px - 这将适用于小屏幕,例如仅限肖像的iphone
3. 宽度:480px - 640px - 这将适用于较大的屏幕,如横向的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; 
    } …