Responsive design 响应式设计中的媒体查询

我正在创建一个快速响应的网站。对于较小监视器的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设置

在监视器中，我看到了我编写的mobile.css

---

我该怎么办？

尝试使用媒体类型“屏幕”而不是“手持”。大多数移动设备都会说它们是一个屏幕。所以你的css应该是：

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

---

是的，为什么？另外，为什么有些智能手机在没有PDA的情况下会将自己识别为PDA？手持媒体类型已经变得多余，因为苹果和安卓将自己声明为屏幕，我相信手持媒体类型适用于具有非常基本的web浏览器的较旧设备。

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

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