媒体查询：不工作
Media queries: not working
我正在使用 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'] },
..................
]
},
.....
更新
min/max-device-width 是 deprecated
Deprecated
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of
being dropped. Avoid using it and update existing code if possible;
see the compatibility table at the bottom of this page to guide your
decision. Be aware that this feature may cease to work at any time
而不是使用
@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
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
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.
我正在使用 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'] },
..................
]
},
.....
更新
min/max-device-width 是 deprecated
Deprecated
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time
而不是使用
@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
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
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.