CSS @media rule in pug?

Question

Is it possible to apply @media rules on pug? I don't know how to adjust my pages' components when the screen size is changed.

I've tried

@media only screen and (max-width : 320px){
    body{
      background: #FF5D50;
    }
}

but nothing happens when I change the device on Chrome.

Answer 1

All CSS including @media rules should work in Pug templates, you just need to ensure proper indentation below style.

style.
    @media only screen and (max-width: 320px) {
        body {
            background: #FF5D50;
        }
    }

Answer 2

Media query works once headers are set properly in pug layout.

meta(content='width=device-width' initial-scale='1' shrink-to-fit='no' name='viewport')