在html中使用媒体查询_Html_Css_Media Queries

在html中使用媒体查询

html css

在html中使用媒体查询,html,css,media-queries,Html,Css,Media Queries,为了实验目的，我编写了一个简单的HTML程序：代码如下： <!DOCTYPE html> <html> <head> <style> body { background-color: green; } @media screen and (device-height: 375px) and (device-width: 667px) { body { background-color: blue; } }

为了实验目的，我编写了一个简单的

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>


身体{
背景颜色：绿色；
}
@媒体屏幕和（设备高度：375px）和（设备宽度：667px）{
身体{
背景颜色：蓝色；
}
}
媒体查询是可以应用于CSS样式的简单过滤器。它们可以根据呈现内容的设备的特性（包括显示类型、宽度、高度、方向甚至分辨率）轻松更改样式

但ut在iPhone6上试用时不会改变颜色。代码有什么问题？逻辑表达式正确吗

这可以在浏览器中使用，也可以在IPhone上使用：

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


身体{
背景颜色：绿色；
}
@媒体屏幕和（最大高度：375px）和（最大宽度：667px）{
身体{
背景颜色：蓝色；
}
}
媒体查询是可以应用于CSS样式的简单过滤器。它们可以根据呈现内容的设备的特性（包括显示类型、宽度、高度、方向甚至分辨率）轻松更改样式

这对我在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)

使用最大设备宽度和最小设备高度

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

设备宽度

和

设备高度

将计算准确的宽度和高度。所以使用

最小高度

和

最小宽度

而不是

设备宽度

和

设备高度

。所以我应该使用

最小设备宽度

和

最大设备宽度

？检查第一个答案很好，这很有效。。。但是你怎么知道这些值呢？尝试和错误^^如果有效，请接受答案：-）接受答案：）

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