@import शैलियों मीडिया क्वेरी में काम नहीं कर रहे हैं

Question

मैं मीडिया क्वेरी के आधार पर एक शैली आयात करने की कोशिश कर रहा हूं लेकिन आयात ट्रिगर नहीं किया जा रहा है यदि मैं सीधे मीडिया क्वेरी में शैली डालता हूं तो उन्हें पृष्ठ पर प्रस्तुत किया जाता है।

यहाँ यहाँ मीडिया क्वेरी और आयात

मैं वर्डप्रेस का उपयोग कर रहा है कि अगर डिबग में मदद करता है के साथ अपने style.css है लाइव साइट http://update.techbasics.ca

करने के लिए एक कड़ी है।

@import url('base.css'); 
/****************************************************************** 
Site Name: Tech Basics 
Author: Anders Kitson 

Stylesheet: Main Stylesheet 

Here's where the magic happens. Here, you'll see we are calling in 
the separate media queries. The base mobile goes outside any query 
and is called at the beginning, after that we call the rest 
of the styles inside media queries. 
******************************************************************/ 
* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; } 

/***************************************************************** 
BASE CSS 
*****************************************************************/ 

/***************************************************************** 
MEDIA QUERIES 
*****************************************************************/ 
@media only screen and (min-width: 480px) { 
    @import url('min480.css'); 
    } 
@media only screen and (min-width: 600px) { 
    @import url('min600.css'); 
    } 
@media only screen and (min-width: 768px) { 
    body { 
    background: purple; } } 
@media only screen and (min-width: 992px) { 
    body { 
    background: orange; } } 
@media only screen and (min-width: 1382px) { 
    body { 
    background: url("../img/noisy_grid.png"); } } 
/* iPhone 4 ----------- */ 
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { 
    @import url('base.css'); 
} 

और यहाँ min600.css (style.css फ़ाइल के रूप में ही निर्देशिका में स्थित)

header { 
    text-align: left; } 
    body{ 
    background: green; 
    } 

Answer 1

यह ठीक काम करता है, अपने विंडो का आकार बदलने के लिए कोशिश करते हैं और आप रंग बदल रहा है देखेंगे मैं अपनी स्क्रीन (1920x1080) CSS नियम

body { 
background: url("../img/noisy_grid.png"); 
} 

style.css में स्थित है, लाइन पर मेरी मुख्य विंडो में देख सकते हैं 37-38 आग पहले, यही कारण है कि आप नारंगी रंग नहीं देख सकता है। अपने सीएसएस नियमों को व्यवस्थित करने का प्रयास करें

Answer 2

मुझे एक ही समस्या थी और एक अच्छा समाधान खोजने के बिना खोज करने के बाद, मैंने मीडिया प्रश्नों को आयातित सीएसएस में स्थानांतरित कर दिया। और वास्तव में सभी स्टाइल शीट्स डाउनलोड की जाती हैं भले ही वे लागू नहीं हों (देखें CSS media queries)।

फिर अलग फाइलों का क्या मतलब है? मेरे लिए, यह चीजें व्यवस्थित रखती है। min600.css पर फिर

@import url(min480.css); /* min-width: 480px */ 
@import url(min600.css); /* min-width: 600px */ 

: अपने उदाहरण का उपयोग

/* min600.css */ 
@media only screen and (min-width: 600px) { 
    header { 
     text-align: left; 
    } 
    body { 
     background: green; 
    } 
} 

Answer 3

आप इस तरह का उपयोग किया?

आप लिख सकते हैं:

@import url('path.css') (screen and min/max-width: 600px);

के रूप में आप @import

या की तरह उपयोग करने पर आप पथ जोड़ सकते हैं:

@import url(style.css) (screen and min-width:600px);

Answer 4

कोड उस तरह की कोशिश

@import url("/inc/Styles/full.css") (min-width: 940px); 

Answer 5

यहाँ समाधान है:

/* Everything 700px and lower */ 
@import url("./700.css") only screen and (max-width: 700px); 

Answer 6

MDN कहा गया है कि @import नेस्ट नहीं किया जा सकता और @charset को छोड़कर अन्य सभी घोषणाओं से पहले आना चाहिए।

वाक्य रचना इस प्रकार है:

@import url; 
@import url list-of-media-queries; 

https://developer.mozilla.org/en-US/docs/Web/CSS/@import