VB_*_*VB_ 3 html css css3 media-queries responsive-design
我正在使用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被弃用
弃用
此功能已从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.否则为零.