Question

我为实验目的写了一个简单的HTML程序：
这是代码：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: green;
}

@media screen and (device-height: 375px) and (device-width: 667px) {
    body {
        background-color: blue;
    }
}
</style>
</head>
<body>

<p>Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.</p>

</body>
</html>

但是在iPhone 6中试用时，ut并没有改变颜色。代码出了什么问题？逻辑表达是否正确？

Answer 1

这可以在浏览器中使用，也可以在你的iPhone上使用：

（最大宽度和最小宽度，而不是设备高度和设备宽度）

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: green;
}

@media screen and (max-height: 375px) and (max-width: 667px) {
    body {
        background-color: blue;
    }
}
</style>
</head>
<body>

<p>Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.</p>

</body>
</html>

Answer 2

这适用于iphone 6：

@media only screen and (min-device-width: 374px) and (max-device-width: 376px)

这适用于iphone 6 +：

@media only screen and (min-device-width: 413px) and (max-device-width: 415px)

Answer 3

使用max-device-width和min-device-height。

@media all and (min-device-width: XXXpx) and (max-device-width: XXXpx)

在html中使用媒体查询

3 个答案: