媒体查询：不工作答案

【问题标题】：Media queries: not working媒体查询：不工作
【发布时间】：2016-01-11 11:43:06
【问题描述】：

我正在使用 webpack 和更少的预处理器。我还在main.less 的底部包含media.less 文件。问题是 @media 标签内的所有样式都被忽略了。

CSS 代码：

@media all and (min-device-width : 414px) and (max-device-width : 736px) {
  body {
    background-color: black; //ignored, but if put it outside @media tag - it works
  }
}

HTML：

<!doctype html>
<html lang="en">
    <head>
        ......
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    </head>
    <body>
        ......
    </body>
</html>

webpackConfig.js：

module: {
  loaders: [
    { test: /\.less$/, loaders: ['style', 'css', 'autoprefixer', 'less'] },
    ..................
  ]
},
.....

【问题讨论】：

标签： html css responsive-design media-queries

【解决方案1】：

更新

min/max-device-width 是deprecated

已弃用

此功能已从 Web 标准中删除。虽然有些浏览器可能仍然支持它，但它正在处理中被丢弃。尽可能避免使用它并更新现有代码；请参阅本页底部的兼容性表以指导您的决定。请注意，此功能可能随时停止工作

而不是使用

@media all and (min-device-width : 414px) and (max-device-width : 736px)

仅供参考

@media all and (min-width : 414px) and (max-width : 736px)

为什么？

`min/max-width`

宽度媒体特征描述了渲染表面的宽度输出设备（例如文档窗口的宽度，或打印机上页框的宽度）。

`min/max-device-width`

判断输出设备是网格设备还是位图设备。如果设备是基于网格的（例如 TTY 终端或手机显示只有一种字体），值为1。否则为零。

【讨论】：

我希望它同时适用于：手机和浏览器。有没有办法同时使用两者，比如(min-device-width : 414px) and (min-width : 414px)？
(min-width) 它适用于移动设备和桌面设备，请参阅width 和device-width 的文档