響應式設計中的媒體查詢

Question

我正在創建響應式網站。對於CSS的顯示器比較小，我寫了這個：

@media only screen and (min-width: 1224px) and (max-width: 1440px) { 
/*css here*/ 
} 

和CSS的HTML部分：

<link rel="stylesheet" type="text/css" media="screen (min-width: 1224px)" href="css/monitor.css" /> 

，當我創建CSS的智能手機： HTML：

<link rel="stylesheet" type="text/css" media="(min-width: 320px)" href="css/mobile.css" /> 

css：

@media handheld and (min-device-width: 320px), 
handheld and (max-device-width: 767px) { 
/*css here*/ 
} 

1. 不」看到在智能手機
在顯示器
2. 我的CSS設置我看看我寫的mobile.css

我該怎麼辦？

Answer 1

嘗試使用媒體類型'屏幕'而不是'手持'。大多數移動設備會說他們是一個屏幕。所以你的CSS將是：

@media screen and (min-device-width: 320px), 
screen and (max-device-width: 767px) { 
/*css here*/ 
}