JSFiddle

Question

我的一个客户有一个响应式设计的网站（三个基于范围），有很多图形，他们必须减少每个范围的图形。我们不需要通过设备或任何愚蠢的方式进行检测，但我确实需要使用CSS配置文件进行定义，以后我可以使用JavaScript进行阅读，因为我们必须使用JavaScript / CSS来解决问题，因为background-image基于＆＃34; profile＆＃34;计算必须基于哪个媒体查询生效。

不幸的是，当涉及到哪个配置文件“活跃”时，Firefox和Chrome的表现有点不稳定。客户认为640像素或更少是＃34;电话＆＃34;装置，641~991 a＆＃34;平板电脑＆＃34;设备和992像素以及更大的桌面＆＃34;设备。我已经设法改进了一些东西，虽然我还没弄清楚为什么＆＃34;平板电脑＆＃34;我没有在Firefox上工作，为什么这两个人都打电话＆＃34;和平板电脑＆＃34;不在Chrome上工作？

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Device Profiles</title>
<style type="text/css">
@media (min-width: 0) and (max-width: 640px) {
    h1::before {content: 'Phone ';}
}
@media (min-width: 641px) and (min-width: 991px) {
    h1::before {content: 'Tablet ';}
}
@media (min-width: 992px) {
    h1::before {content: 'Desktop ';}
}
</style>
</head>

<body>

<h1>Profile</h1>

</body>
</html>

Answer 1

您的媒体查询在Chrome和Firefox中都可以正常使用，唯一的问题是平板电脑断点，因为您将min-width两次而不是max-width。只需将其更改为：

@media (min-width: 641px) and (max-width: 991px) {
    h1::before {content: 'Tablet ';}
}

JSFiddle

Answer 2

你的错误是意外使用了两个min-width。请试试这个。

@media (min-width: 0) and (max-width: 640px) {
    h1::before {content: 'Phone ';}
}

@media (min-width: 641px) and (max-width: 991px) {
    h1::before {content: 'Tablet ';}
}

@media (min-width: 992px) {
    h1::before {content: 'Desktop ';}
}

Answer 3

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Device Profiles</title>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
@media (min-width: 0) and (max-width: 640px) {
    h1::before {content: 'Phone ';}
}
@media (min-width: 641px) and (max-width: 991px) {
    h1::before {content: 'Tablet ';}
}
@media (min-width: 992px) {
    h1::before {content: 'Desktop ';}
}
</style>
</head>

<body>

<h1>Profile</h1>

</body>
</html>

CSS媒体查询无法在Firefox和Chrome中使用

3 个答案:

JSFiddle