我正在使用 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'] },
..................
]
},
.....
UPDATE
min/max-device-width are 已弃用
已弃用
此功能已从 Web 标准中删除。尽管某些浏览器可能仍然支持它，但它正在改进中
被丢弃。避免使用它并尽可能更新现有代码；
请参阅本页底部的兼容性表来指导您
决定。请注意，此功能可能随时停止工作
而不是使用
@media all and (min-device-width : 414px) and (max-device-width : 736px)
Use only
@media all and (min-width : 414px) and (max-width : 736px)
WHY?
min/max-width
width 媒体特征描述了渲染表面的宽度
输出设备（例如文档窗口的宽度，或
打印机上页框的宽度）。
min/max-device-width
确定输出设备是网格设备还是位图
设备。如果设备是基于网格的（例如 TTY 终端或
手机显示屏只有一种字体），值为 1。否则为
零。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
