2010-10-12 12 views
12

क्या ब्राउज़र के लिए डिफ़ॉल्ट मीडिया प्रकार निर्दिष्ट करने के कुछ साधन हैं (चलो क्रोम कहते हैं), ताकि मैं css @media शैलियों का परीक्षण कर सकूं?ब्राउज़र में सीएसएस मीडिया प्रकार बदलना

@screen 
{ 
    div { background-color:red; } 
} 

@handheld 
{ 
    div { background-color:lime; } 
} 

<div style="width:100px;height:100px"></div> 

ऐसा है कि मैं (मेरे कोड को छूए बिना) ब्राउज़र में दो मीडिया प्रकारों का परीक्षण कर सकता हूं? मीडिया प्रकार को बदलने से उपरोक्त div का रंग बदल जाएगा। एक क्रोम एक्सटेंशन, जावास्क्रिप्ट या कुछ अन्य जादू का थोड़ा सा सराहना की जाएगी।

उत्तर

17

क्या आप यह देख रहे हैं?

Web Developer extension for Chrome

वेब डेवलपर विस्तार एक विशेषता "प्रदर्शन सीएसएस करके मीडिया प्रकार" कहलाता है। यदि यह आप में मदद नहीं करता, तो आप हमेशा मीडिया प्रकार प्रति एक स्टाइलशीट बनाने के लिए और किस प्रकार लोड करने के लिए निर्दिष्ट करने के लिए आयात सीएसएस बयान इस्तेमाल कर सकते हैं:

@import url("handhelds.css") screen; 
+0

एरिक, पॉइंटर्स के लिए धन्यवाद यह बहुत मदद करता है। – freddylindstrom

+0

अच्छा, मुझे बताएं कि इससे संबंधित कुछ और है, तो आपको इसका जवाब नहीं मिला है। – Erik

3

इल्या पर Stackoverflow this answer लिखा था, मैंने पाया यह आसान और उपयोगी:

वहाँ media queries साथ साथ हाथ में सीएसएस का परीक्षण करने के लिए एक आसान तरीका है: कम से कम 500px करने के लिए विंडो का आकार बदलने द्वारा

@media handheld, screen and (max-width: 500px) { /* your css */ } 

उसके बाद आप ब्राउज़रों कि मीडिया के प्रश्नों को लागू पर परीक्षण कर सकते हैं

यह सब कुछ है!

संबंधित मुद्दे