我的一個客戶有一個響應式設計（三個基於範圍）的網站，它有很多圖形，他們必須減少每個範圍的圖形。雖然我確實需要用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

相關問題