文章/答案/技术大牛

发布

问CSS媒体-查询不工作
EN

Stack Overflow用户

提问于 2014-06-04 01:45:14

回答 2查看 684关注 0票数 0

我正在工作的TAFE任务，以创建一个完整的响应设计网站，但我有一个问题的反应部分，它。对于移动设备(iPad、iPhone、iPod Touch已经过测试)，他们唯一遵循的查询是screen and (max-width:1000px)，尽管my iPad的屏幕宽度为798 of，而my iPod Touch的宽度为320 of。

因此，在我所有的媒体查询中，移动设备只排在前两名之后。

@media screen and (max-width: 1180px) {
    body {
        margin: 0 5%;
    }
}

@media screen and (max-width: 1000px) {
    body {
        margin: 0;
    }
}

@media screen and (max-width: 900px) {
    body header h1 {
        right: 1%;
    }
}

@media screen and (max-width: 800px) {
    body header h1 {
        bottom: 22%;
    }
}

@media screen and (max-width: 700px) {
    body #content-wrap #right {
        display: none;
    }

    body #content-wrap #left {
        width: calc(100% - 2.54%);
    }
}

@media screen and (max-width: 690px) {
    body header {
        /* background-position: 40% -100px; */
        background-position: 40% -130px;
    }
}

@media screen and (max-width: 520px) {
    body header h1 {
        font-size: 220%;
    }
}

它的行为方式有什么原因吗?有什么方法可以解决吗？

编辑:桌面浏览器在调整大小时遵循所有这些规则。

ios

css

media-queries

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-06-04 01:53:21

将此添加到<head>中

<meta name="viewport" content="width=device-width, initial-scale=1">

➔文档

票数 3

Stack Overflow用户

发布于 2014-06-04 01:54:51

确保你有：

<meta name="viewport" content="width=device-width, initial-scale=1">

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24027727

复制

相似问题

问CSS媒体-查询不工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS媒体-查询不工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS媒体-查询不工作
EN