我正在构建一个响应式布局，默认情况下首先从移动设备（1 列）开始，然后在横向和纵向模式下为平板电脑设置断点，最后是桌面。
对于我的平板电脑（1 列），我有断点。
但对于桌面，我正在使用的设计的布局（2 列）最大宽度仅为 976px。
是否可以仅针对桌面（最小宽度 976px），同时防止平板电脑媒体查询拾取它们？在桌面上，如果它小于 976px，它应该适应移动布局。
使用 Modernizr (http://modernizr.com/download/) 检测触摸设备。 Modernizr 会将
.touch.no-touch.touch@media only screen and (min-width: 960px) {
.touch .container { width: 960px; }
}
我不是这方面的专家，但我确实使用媒体查询设计了一个网站。
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
最好坚持此处给出的查询标准，以避免稍后当您的 css 混乱时网站初具规模。
@media only screen (min-device-width: 1024px)
这应该适合您的桌面。
我正在使用媒体查询，我关注的手机有两种分辨率
（智能手机412*915） （智能手机385*854） 但我面临的问题是两者重叠，问题是什么？
@media only screen and (min-width: 412px) and (max-width: 915px) { /* 智能手机 (2) --- (智能手机 412 * 915 ) --- ---- (实际 412 * 915 ) --- */
body { 背景颜色: rgb(234, 149, 149); /* 肖像颜色 */ }
@media only screen and (orientation: Landscape) { /* 专门针对横向的样式 */
body { 背景颜色：#F4F4F4 ！重要； /* 风景颜色 */ } }
}
@media only screen and (min-width: 384px) and (max-width: 854px) { /* 智能手机 (1) --- (智能手机 385 * 854 ) --- ---- (实际 385 * 854 ) --- */
body.index-page.is-smartphone { 背景颜色：#a3d093; /* 肖像颜色 */ }
@media only screen and (orientation: Landscape) { /* 专门针对横向的样式 */
body { 背景颜色：紫色！重要； /* 风景颜色 */ }
}
}
我希望为每个分辨率应用不同的样式，没有任何重叠。然而，我面临一个问题，两个决议的风格重叠，导致冲突。