Why doesn't @import work inside media query?

Question

css

Have a nice day.
Why might this not work:

@media all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape){
  @import url("ipad-landscape/common.css");
  }

Tested on ipad emulator under macosx.
At the same time, the media-rule itself seems to be correct.
Here is what works:

@media all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape){
  body.my-class{
    color:#f00;
    }
  }

I am in thought.
I would also be grateful for articles on mediaquery's support for desktop browsers and ipad, iphone retina, iphone.

Answer 1

Good afternoon.
This design doesn't work.
At the beginning of the CSS you already declared the "@media" rule, and after it you want to do "@import"
@import is not allowed after any declaration other than @charset or another @import.
That is, for @import to work, it must be at the very beginning of the CSS list or file.
Proflink: www.w3.org/TR/CSS21/cascade.html#at-import (any @import rules must precede all other rules (except the @charset rule, if present), also in Russian: htmlbook.ru/css /import
Something like this.

Answer 2

Oh sorry.
This is very inconvenient.
By the way, mediaquery for ipad-iphone rulers

/*DESKTOP дохуя×дохуя*/
@media all and (min-device-width: 1025px){
  body:before{
    content:"Desktop";
    }
  }

/*IPAD 1 1024×768*/
@media all and (max-device-width:1024px) and (min-device-width:481px) and (orientation:landscape){
  .ipad:before{
    content:"IPad landscape";
    }
  }

@media all and (max-device-width:768px) and (min-device-width:321px) and (orientation:portrait){
  .ipad:after{
    content:"IPad portrait";
    }
  }
  
/*IPHONE RETINA 640 × 960*/

@media all and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:480px) and (orientation:landscape){  
  .iphone-retina:before{
    content:"IPhone Retina landscape";
    }
  }

@media all and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:320px) and (orientation:portrait){
  .iphone-retina:after{
    content:"IPhone Retina portrait";
    }
  }

/*IPHONE TFT 320 × 480*/

@media all and (max-device-width:480px) and (-webkit-max-device-pixel-ratio: 1) and (orientation:landscape){
  .iphone-tft:before{
    content:"IPhone TFT landscape";
    }
  }

@media all and (max-device-width:320px) and (-webkit-max-device-pixel-ratio: 1) and (orientation:portrait){
  .iphone-tft:after{
    content:"IPhone TFT portrait";
    }
  }