我的一个客户有一个响应式设计（三个基于范围）的网站，它有很多图形，他们必须减少每个范围的图形。虽然我确实需要用CSS配置文件来定义我们以后可以用JavaScript读取的东西，但我们不会用设备或任何愚蠢的东西来检测，因为有些东西我们不得不用JavaScript和CSS来改变风格，图像基于“配置文件”移动，计算必须基于哪个媒体查询生效。在Firefox和Chrome中不起作用的CSS媒体查询

不幸的是，当涉及到哪些配置文件处于“活动”状态时，Firefox和Chrome浏览器都显得有些诡异。客户认为640像素或更少是“手机”设备，641〜991是“平板”设备，992像素或更高是“桌面”设备。尽管我还没有弄清楚为什么“平板电脑”不适用于Firefox以及为什么“手机”和“平板电脑”无法在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>

来源

2016-03-02 John

我相信你错过了元标记 - ''。 – Tricky12

你的媒体查询在Chrome和Firefox的工作对我来说很好，唯一的问题是平板电脑的断点，因为你把min-width两次，而不是max-width。只需将其更改为：

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

JSFiddle

来源

2016-03-02 21:05:39 APAD1

你的错误是使用两个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 ';} 
}

来源

2016-03-02 21:06:11

<?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>

来源

2017-04-03 07:03:00

在Firefox和Chrome中不起作用的CSS媒体查询

回答

JSFiddle

相关问题