3

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'] },
    ..................
  ]
},
.....
dippas
  • 58,591
  • 15
  • 114
  • 126
VB_
  • 45,112
  • 42
  • 145
  • 293

1 Answers1

11

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.

dippas
  • 58,591
  • 15
  • 114
  • 126
  • I want it works on both: mobiles & browsers. Is there any way to use both, like `(min-device-width : 414px) and (min-width : 414px)`? – VB_ Oct 13 '15 at 16:21
  • `(min-width)` it will work on mobile and desktops, see Documentation for both [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#width) and [`device-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#device-width) – dippas Oct 13 '15 at 16:26