响应式设计中的媒体查询

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*/ 
}