媒体查询：不工作 [英] Media queries: not working
问题描述
我正在使用webpack和更少的预处理器。还包括 main.less 底部的 media.less 文件。问题是 @media 标签中的所有样式都被忽略。
I'm using webpack and less preprocessor. Also I include media.less file at the bottom of main.less. The problem is all styles inside @media tags are ignored.
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
}
}
$ b b
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'] },
..................
]
},
.....
推荐答案
$ b
Instead of using
@media all and (min-device-width : 414px) and (max-device-width : 736px)
仅使用
@media all and (min-width : 414px) and (max-width : 736px)
为什么？
宽度媒体功能描述输出设备
的呈现表面的宽度（例如文档窗口的宽度或页面框的
宽度在打印机上）。
The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).
min / max-device-width
min/max-device-width
确定输出设备是网格设备还是位图
设备。如果设备是基于网格的（例如只有一种字体的TTY终端或
电话显示器），则值为1.否则为
零。
Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1. Otherwise it is zero.
这篇关于媒体查询：不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
