CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
VB_
VB_

Reputation: 45692

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

Upvotes: 3

Views: 3649

Answers (1)

dippas
dippas

Reputation: 60563

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.

Upvotes: 11

Related Questions