कुछ कम जादू के साथ फैंसी मीडिया क्वेरी

Question 1

कम उपयोग करने वाले कुछ सीएसएस-वर्गों के भीतर विभिन्न प्रस्तावों के लिए सीएसएस-शैलियों को लपेटना अच्छा होगा।

मैं कुछ करना चाहता हूँ जैसे:

footer {
  width: 100%;
}

.tablet {
  footer {
    width: 768px;
  }
}

.desktop {
  footer {
    width: 940px;
  }
}

अंत में कुछ इस तरह होना चाहिए परिणाम:

footer {
  width: 100%;
}

@media screen and (min-width: 768px) {
  footer {
    width: 768px;
  }
}

@media screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

.tablet कुछ इस तरह दिख सकता है:

@media screen and (min-width: 768px) {
  .tablet {

  }
}

आशा है कि किसी को एक अच्छा विचार है!

Question 2

मैंने अपनी परियोजनाओं में यही किया है:

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

@media @desktop {
  footer {
    width: 940px;
  }
}

@media @tablet {
  footer {
    width: 768px;
  }
}

यह आपको केवल एक बार अपने मीडिया प्रश्नों को परिभाषित करने की अनुमति देता है और आप इसे अपनी कम फ़ाइलों में उपयोग कर सकते हैं। पढ़ने में भी थोड़ा आसान। :)

Question 3

मैं हाई गुयेन के उत्तर (जो स्वीकार कर लिया गया है) से पूरी तरह सहमत हूं लेकिन आप इसे कुछ और करके साफ कर सकते हैं:

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

footer{
  width: 100%;
  @media @tablet {
    width: 768px;
  }
  @media @desktop {
    width: 940px;
  }
}

यह मूल रूप से एक ही बात है, लेकिन आप मूल चयनकर्ता के अंदर अपने मीडिया प्रश्नों को घोंसला बनाते हैं। यह एक विशिष्ट तत्व के लिए सभी सीएसएस को एक साथ रखता है और आपकी शैलियों को बहुत अधिक मॉड्यूलर बनाता है (बनाम विभाजित ब्रेकपॉइंट दृष्टिकोण)।

Question 4

गुयेन और Yancey के लिए +1 - और एक अतिरिक्त।

यदि आप चौड़ाई की स्पष्ट परिभाषा चाहते हैं , तो आप string interpolationअपने ब्रेकप्वाइंट के लिए उसे और चर को पूरा कर सकते हैं । यहाँ बूटस्ट्रैप वालों के साथ उदाहरण के लिए - सख्त अतिव्यापी परिभाषा को रोकने के लिए सख्त नियम हैं।

@screen-xs-min:     480px;
@screen-sm-min:     768px;
@screen-md-min:     992px;
@screen-lg-min:     1200px;

@screen-xs-max:     (@screen-sm-min - 1);
@screen-sm-max:     (@screen-md-min - 1);
@screen-md-max:     (@screen-lg-min - 1);

@phone:             ~"only screen and (max-width: @{screen-xs-min})";
@phone-strict:      ~"only screen and (min-width: @{screen-xs-min}) and (max-width: @{screen-xs-max})";
@tablet:            ~"only screen and (min-width: @{screen-sm-min})";
@tablet-strict:     ~"only screen and (min-width: @{screen-sm-min}) and (max-width: @{screen-sm-max})";
@desktop:           ~"only screen and (min-width: @{screen-md-min})";
@desktop-strict:    ~"only screen and (min-width: @{screen-md-min}) and (max-width: @{screen-md-max})";
@large:             ~"only screen and (min-width: @{screen-lg-min})";

footer{
    width: 100%;
    @media @tablet {
        width: 768px;
    }
    @media @desktop {
        width: 940px;
    }
}

Question 5

और आप इस तरह से मीडिया के प्रश्नों को भी जोड़ सकते हैं

@media @desktop, @tablet, @ipad{ 

//common styles... 

}

Question 6

हम इस तरह से एक सेटअप का उपयोग करते हैं:

@vp_desktop:    801px;
@vp_tablet:     800px;
@vp_mobile:     400px;

.OnDesktop(@rules) { @media screen and (min-width:@vp_desktop){ @rules(); } };
.OnTablet(@rules) { @media screen and (max-width:@vp_tablet){ @rules(); } };
.OnMobile(@rules) { @media screen and (max-width:@vp_mobile){ @rules(); } };

आपको केवल चर सेट करने की आवश्यकता है, मिश्रण बाकी को संभालता है इसलिए इसे अभी भी लचीला बनाए रखना बहुत आसान है:

div {
  display: inline-block;
  .OnTablet({
    display: block;
  });
}

यह ध्यान देने योग्य है कि जबकि यह तकनीक बहुत आसान है, अगर आपके सीएसएस आउटपुट का बुरी तरह से उपयोग किया जाता है, तो यह मीडिया प्रश्नों से भरा होगा। मैं अपने मीडिया प्रश्नों को प्रति-ब्रेकपॉइंट, प्रति-फ़ाइल तक सीमित करने का प्रयास करता हूं। जहां एक फाइल हैडर होगी।

NB यह विधि शायद तब तक संकलित नहीं होगी जब तक आप जावास्क्रिप्ट कंपाइलर का उपयोग नहीं करते हैं।

Question 7

मैं इन मिश्रणों और चर का उपयोग कर रहा हूं

.max(@max; @rules){@media only screen and (max-width: (@max - 1)){@rules();}}
.min(@min; @rules){@media only screen and (min-width: @min){@rules();}}
.bw(@min; @max; @rules){@media only screen and (min-width: @min) and (max-width: (@max - 1)){@rules();}}

@pad: 480px;
@tab: 800px;
@desktop: 992px;
@hd: 1200px;

तो यह

footer{
    width: 100%;
    .bw(@tab,@desktop,{
        width: 768px;
    });
    .min(@desktop,{
        width: 940px;
    });
}

हो जाता है

footer {
  width: 100%;
}
@media only screen and (min-width: 800px) and (max-width: 991px) {
  footer {
    width: 768px;
  }
}
@media only screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

Question 8

@highdensity:  ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
               ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
               ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
               ~"only screen and (min-device-pixel-ratio: 1.5)";

@mobile:        ~"only screen and (max-width: 750px)";
@tab:       ~"only screen and (min-width: 751px) and (max-width: 900px)";
@regular:        ~"only screen and (min-width: 901px) and (max-width: 1280px)";
@extra-large:  ~"only screen and (min-width: 1281px)";

Question 9

और यही मैंने अपनी परियोजना के लिए उपयोग किया है:

    @mobile:   ~"only screen and (min-width: 320px) and (max-width: 767px)";
    @tablet:    ~"only screen and (min-width: 768px) and (max-width: 991px)";
    @ipad:    ~"only screen and (min-width: 992px) and (max-width: 1024px)";

    @media @mobile {
      .banner{
        width: auto;
      }
    }

    @media @tablet {
      .banner{
        width: 720px;
      }
    }

  @media @ipad {
      .banner{
        width: 920px;
      }
    }