【问题标题】:Media queries: not working媒体查询:不工作
【发布时间】:2016-01-11 11:43:06
【问题描述】:

我正在使用 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'] },
    ..................
  ]
},
.....

【问题讨论】:

    标签: html css responsive-design media-queries


    【解决方案1】:

    更新

    min/max-device-widthdeprecated

    已弃用

    此功能已从 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。否则为 零。

    【讨论】:

    • 我希望它同时适用于:手机和浏览器。有没有办法同时使用两者,比如(min-device-width : 414px) and (min-width : 414px)
    • (min-width) 它适用于移动设备和桌面设备,请参阅widthdevice-width 的文档
    猜你喜欢
    • 2017-10-16
    • 1970-01-01
    • 1970-01-01
    • 2015-12-01
    • 2014-01-24
    • 2016-12-13
    相关资源
    最近更新 更多