Question

我正在使用webpack和更少的预处理器。我还在media.less的底部加了main.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'] },
    ..................
  ]
},
.....

Answer 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)

<强> WHY吗

`min/max-width`

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

`min/max-device-width`

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

媒体查询：不工作

1 个答案:

`min/max-width`

`min/max-device-width`