响应式设计中的媒体查询

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. 不要在智能手机上看到我的CSS设置
2. 在显示器中我看到我写的是mobile.css

我该怎么办？

Answer 1

尝试使用媒体类型“屏幕”而不是“掌上电脑”。大多数移动设备会说它们是一个屏幕。所以你的css将是：

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