Question

我在一个主题CSS文件中发现有css媒体查询，但主题没有在移动设备，平板电脑等设备中正确加载。任何人都可以帮我找出媒体查询代码中的错误吗？

CSS

@media screen and (min-width: 220px) and (max-width: 300px),
handheld and (min-width: 220px) and (max-width: 300px),
screen and (min-device-width: 220px) and (max-device-width: 300px) {
    body { width: 100%;}
    .header .logo { width: 220px;}
    .countdown .clock { width: 220px;}
    .countdown .clock li.seconds, .countdown .clock li.minutes, .countdown .clock li.hours { display: none;}
    .paragraph { width: 220px;}
    .newsletter input.email { width: 200px;}
    .footer { width: 220px;}
    .footer li.twitter, .footer li.socialize, .footer li.contact { width: 100%; margin: 0 20px 40px 20px;}
    .footer .socialize .socialicons li a { margin: 0 16px 10px 0;}
}

@media screen and (min-width: 300px) and (max-width: 440px),
handheld and (min-width: 300px) and (max-width: 440px),
screen and (min-device-width: 300px) and (max-device-width: 440px) {
    body { width: 100%;}
    .header .logo { width: 280px;}
    .countdown .clock { width: 280px;}
    .countdown .clock li.seconds, .countdown .clock li.minutes, .countdown .clock li.hours { display: none;}
    .paragraph { width: 280px;}
    .newsletter input.email { width: 120px;}
    .footer { width: 280px;}
    .footer li.twitter, .footer li.socialize, .footer li.contact { width: 100%; margin: 0 20px 40px 20px;}
    .footer .socialize .socialicons li a { margin: 0 16px 10px 0;}
}


@media screen and (min-width: 440px) and (max-width: 720px),
handheld and (min-width: 440px) and (max-width: 720px),
screen and (min-device-width: 440px) and (max-device-width: 720px) {
    body { width: 100%;}
    .header .logo { width: 460px;}
    .countdown .clock { width: 460px;}
    .countdown .clock li.seconds, .countdown .clock li.minutes { display: none;}
    .paragraph { width: 460px;}
    .newsletter input.email { width: 250px;}
    .footer { width: 460px;}
    .footer li.twitter, .footer li.socialize, .footer li.contact { width: 130px; margin: 0 30px 0 0;}
    .footer li.contact { margin: 0;}
    .footer .socialize .socialicons li a { margin: 0 16px 10px 0;}
}

@media screen and (min-width: 720px) and (max-width: 980px),
handheld and (min-width: 720px) and (max-width: 980px),
screen and (min-device-width: 720px) and (max-device-width: 980px) {
    body { width: 100%;}
    .header .logo { width: 700px;}
    .countdown .clock { width: 700px;}
    .countdown .clock li.seconds { display: none;}
    .paragraph { width: 700px;}
    .newsletter input.email { width: 390px;}
    .footer { width: 700px;}
    .footer li.twitter, .footer li.socialize, .footer li.contact { width: 200px; margin: 0 50px 0 0;}
    .footer li.contact { margin: 0;}
}

@media screen and (min-width: 980px) and (max-width: 1600px),
handheld and (min-width: 980px) and (max-width: 1600px),
screen and (min-device-width: 980px) and (max-device-width: 1600px) {
    body { width: 100% }
    .header .logo { width: 960px;}
    .countdown .clock { width: 960px;}
    .paragraph { width: 960px;}
    .newsletter input.email {width: 390px;}
    .footer {width: 960px;}
    .footer li.twitter, .footer li.socialize, .footer li.contact {width: 260px; margin: 0 60px 0 0;}
    .footer li.contact {margin: 0;}
}

Answer 1

有关媒体查询，请参阅此link适用于手机和平板电脑

CSS3媒体查询问题

CSS

1 个答案: