爲什麼Chrome DevTool設備工具欄無法在不同的樣式表中正常工作？

我不知道這是否與devtool設備工具欄相關的問題，但考慮到以下HTML：爲什麼Chrome DevTool設備工具欄無法在不同的樣式表中正常工作？

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8" /> 
     <link rel='stylesheet' type='text/css' media='screen and (max-width: 700px)' href='css/style_smartphone.css' /> 
     <link rel='stylesheet' type='text/css' media='screen and (min-width: 701px)' href='css/style_tablet.css' /> 
     <title>test</title> 
    </head> 
    <body> 

    </body> 
    </html>

和這2個樣式表：

style_tablet.css

html, body{ 
    height: 100%; 
    width: 100%; 
} 

body { 
    background: black; 
}

style_smartphone.css

html, body{ 
    height: 100%; 
    width: 100%; 
} 

body { 
    background: blue; 
}

我可以看到背景當我縮小窗口大小時會發生變化，但是當我從devtool設備工具欄切換寬度時它不會改變。

我對媒體查詢有任何錯誤嗎？

來源

2017-06-19 Koop4

我測試了這一點我家裏的電腦上，我是能夠複製你的問題。今天我使用Chrome Version 58.0.3029.110（64位）在我的工作MAC上對它進行了測試，並且按預期工作......我將再次嘗試在PC上回復您。 – partypete25

你有沒有時間去測試它？ – Koop4

好了，經過多次測試後，我發現它在Dreamweaver中使用實時預覽功能時起作用，這正是我在MAC上使用的功能。但只需按照您的體驗一般在Chrome中打開它。 – partypete25

我不太確定你的代碼不會像它應該那樣反應，但將它放入樣式表是一種很好的做法。以下是我很快測試過的內容。

HTML

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8" /> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
    <title>test</title> 
</head> 

<body></body> 

</html>

風格

@media screen and (max-width: 1000px) and (min-width:300px) { 
    body { 
     background: blue; 
     height: 100%; 
     width: 100%; 
    } } 

@media screen and (min-width: 1001px) { 
    body { 
     background: black; 
     height: 100%; 
     width: 100%; 
    } }

來源

2017-06-19 19:56:29

我不知道媒體查詢有什麼限制。當提到兩個樣式表或者試圖查詢三種尺寸時，我發現了一些不一致的行爲。 –

感謝您的建議，但我需要找出所述問題的解決方案:) – Koop4

回答

相關問題