Search code examples
htmlcssresponsive-designmedia-queries

Media queries: not working

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 code:

@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'] },
    ..................
  ]
},
.....
Solution

  • UPDATE

    min/max-device-width are 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

    Instead of using

    @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

    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.