जवाबों:
यहाँ बीएस 3 में चयनकर्ताओं का उपयोग किया जाता है, यदि आप लगातार बने रहना चाहते हैं:
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}नोट: FYI करें, यह डिबगिंग के लिए उपयोगी हो सकता है:
<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>यहाँ बीएस 4 में चयनकर्ताओं का उपयोग किया गया है। बीएस 4 में कोई "सबसे कम" सेटिंग नहीं है क्योंकि "अतिरिक्त छोटा" डिफ़ॉल्ट है। यानी आप पहले XS साइज को कोड करेंगे और फिर बाद में ये मीडिया ओवरराइड करेंगे।
@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}अपडेट 2019-02-11: BS3 की जानकारी अभी भी संस्करण 3.4.0 के रूप में सटीक है, नई ग्रिड के लिए अपडेट किया गया BS4, 4.3.0 के रूप में सटीक है।
<span class="visible-xs">SIZE XS</span><span class="visible-sm">SIZE SM</span><span class="visible-md">SIZE MD</span><span class="visible-lg">SIZE LG</span>
बिसियो के उत्तर और बूटस्ट्रैप 3 कोड के आधार पर, मैं किसी के लिए भी अधिक सटीक उत्तर के साथ आने में सक्षम था, बस पूरी मीडिया क्वेरी को उनकी स्टाइलशीट में कॉपी और पेस्ट करना चाह रहा था:
/* Large desktops and laptops */
@media (min-width: 1200px) {
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
}
/* Portrait phones and smaller */
@media (max-width: 480px) {
}min-width, लेकिन आपने भी उपयोग किया है max-width, तो क्या अंतर है ?, क्या यह आवश्यक है?
यदि आप LESS या SCSS / SASS का उपयोग कर रहे हैं और आप बूटस्ट्रैप के LESS / SCSS संस्करण का उपयोग कर रहे हैं, तो आप चर का भी उपयोग कर सकते हैं , बशर्ते आपके पास उनकी पहुँच हो। @ पूर्ण-सभ्य उत्तर का कम से कम अनुवाद इस प्रकार होगा:
@media(max-width: @screen-xs-max){}
@media(min-width: @screen-sm-min){} /* deprecated: @screen-tablet, or @screen-sm */
@media(min-width: @screen-md-min){} /* deprecated: @screen-desktop, or @screen-md */
@media(min-width: @screen-lg-min){} /* deprecated: @screen-lg-desktop, or @screen-lg */वहाँ भी के लिए चर हैं @screen-sm-maxऔर @screen-md-maxजो 1 पिक्सेल कम से कम कर रहे हैं, @screen-md-minऔर @screen-lg-min, क्रमशः, आम तौर पर साथ प्रयोग के लिए @media(max-width)।
संपादित करें: यदि आप SCSS / SASS का उपयोग कर रहे हैं, तो चर एक के $बजाय से शुरू होते हैं @, इसलिए यह होगा $screen-xs-maxआदि।
$screen-xs-maxआदि (और यदि आप स्थानीय रूप से LESS / SCSS का उपयोग कर रहे हैं, लेकिन CSS संस्करण आयात कर रहे हैं बूटस्ट्रैप के, आप पूरी तरह से भाग्य से बाहर हैं।)
@screen-tablet, @screen-desktopऔर @screen-lg-desktopपदावनत कर दिया गया है। आपके पहले से ही भयानक जवाब को अपडेट करने का समय हो सकता है। ;-)
ये बूटस्ट्रैप से मान हैं:
/* Extra Small */
@media(max-width:767px){}
/* Small */
@media(min-width:768px) and (max-width:991px){}
/* Medium */
@media(min-width:992px) and (max-width:1199px){}
/* Large */
@media(min-width:1200px){}andशर्तों को हटा दें । @JasonMiller तो यह बिल्कुल "होना चाहिए" नहीं है, यह चश्मा और टेम्पलेट की आवश्यकता पर निर्भर करता है।
यहाँ दो उदाहरण हैं।
एक बार व्यूपोर्ट 700px चौड़ा या कम हो जाने पर सभी h1 टैग 20px बना लें।
@media screen and ( max-width: 700px ) {
h1 {
font-size: 20px;
}
}जब तक व्यूपोर्ट 700px या उससे बड़ा नहीं हो जाता, तब तक सभी h1 के 20px को बनाएं।
@media screen and ( min-width: 700px ) {
h1 {
font-size: 20px;
}
}आशा है कि यह मदद करता है: 0)
font-size: 20pxलिए उपयोग करते h1हैं। बेहतर समझ के लिए आप font-sizeप्रश्न में पूछे गए अनुसार अलग-अलग उपयोग कर सकते हैं । BTW यह अभी भी ठीक है।
यहां कम फ़ाइलों को आयात किए बिना LET की नकल करने के लिए LESS का उपयोग करने के लिए एक अधिक मॉड्यूलर उदाहरण है।
@screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-md-max: 1199px;
@screen-lg-min: 1200px;
//xs only
@media(max-width: @screen-xs-max) {
}
//small and up
@media(min-width: @screen-sm-min) {
}
//sm only
@media(min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
}
//md and up
@media(min-width: @screen-md-min) {
}
//md only
@media(min-width: @screen-md-min) and (max-width: @screen-md-max) {
}
//lg and up
@media(min-width: @screen-lg-min) {
}अन्य उपयोगकर्ताओं के उत्तरों के आधार पर, मैंने इन कस्टम मिश्रणों को आसान उपयोग के लिए लिखा है:
.when-xs(@rules) { @media (max-width: @screen-xs-max) { @rules(); } }
.when-sm(@rules) { @media (min-width: @screen-sm-min) { @rules(); } }
.when-md(@rules) { @media (min-width: @screen-md-min) { @rules(); } }
.when-lg(@rules) { @media (min-width: @screen-lg-min) { @rules(); } }उदाहरण उपयोग
body {
.when-lg({
background-color: red;
});
}@mixin when-xs() { @media (max-width: $screen-xs-max) { @content; } }
@mixin when-sm() { @media (min-width: $screen-sm-min) { @content; } }
@mixin when-md() { @media (min-width: $screen-md-min) { @content; } }
@mixin when-lg() { @media (min-width: $screen-lg-min) { @content; } }उदाहरण उपयोग:
body {
@include when-md {
background-color: red;
}
}@media (min-width:1200px) {
body {
background-color: red;
}
}बूटस्ट्रैप v3.3.6 के रूप में, निम्नलिखित मीडिया प्रश्नों का उपयोग किया जाता है, जो उस दस्तावेज़ के साथ मेल खाता है जो उपलब्ध कक्षाओं के लिए उत्तरदायी है ( http://getbootstrap.com/css/#responsive-utilities )।
/* Extra Small Devices, .visible-xs-* */
@media (max-width: 767px) {}
/* Small Devices, .visible-sm-* */
@media (min-width: 768px) and (max-width: 991px) {}
/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {}
/* Large Devices, .visible-lg-* */
@media (min-width: 1200px) {}बूटस्ट्रैप GitHub रिपॉजिटरी से निम्न निम्न फ़ाइलों से निकाले गए मीडिया क्वेश्चन: -
https://github.com/twbs/bootstrap/blob/v3.3.6/less/responsive-utilities.less https://github.com/twbs/bootstrap/blob/v3.3.6/less/variables.less
@mixin col-xs() {
@media (max-width: 767px) {
@content;
}
}
@mixin col-sm() {
@media (min-width: 768px) and (max-width: 991px) {
@content;
}
}
@mixin col-md() {
@media (min-width: 992px) and (max-width: 1199px) {
@content;
}
}
@mixin col-lg() {
@media (min-width: 1200px) {
@content;
}
}#content-box {
@include border-radius(18px);
@include adjust-font-size-to(18pt);
padding:20px;
border:1px solid red;
@include col-xs() {
width: 200px;
float: none;
}
}ध्यान रखें कि टेक्स्ट स्केलिंग से बचने का मुख्य कारण उत्तरदायी लेआउट मौजूद है। उत्तरदायी साइटों के पीछे पूरे तर्क कार्यात्मक लेआउट बनाने के लिए है जो प्रभावी रूप से आपकी सामग्री को प्रदर्शित करते हैं ताकि यह आसानी से पठनीय और कई स्क्रीन आकारों पर प्रयोग करने योग्य हो।
यद्यपि कुछ मामलों में पाठ को स्केल करना आवश्यक है, लेकिन अपनी साइट को छोटा करने के लिए सावधान रहें और बिंदु को याद न करें।
वैसे भी एक उदाहरण है।
@media(min-width:1200px){
h1 {font-size:34px}
}
@media(min-width:992px){
h1 {font-size:32px}
}
@media(min-width:768px){
h1 {font-size:28px}
}
@media(max-width:767px){
h1 {font-size:26px}
}यह भी ध्यान रखें कि बूटस्ट्रैप 3 में 480 व्यूपोर्ट को गिरा दिया गया है।
हम अपने ग्रिड सिस्टम में मुख्य विराम बिंदु बनाने के लिए अपनी कम फ़ाइलों में निम्नलिखित मीडिया प्रश्नों का उपयोग करते हैं।
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }बूटस्ट्रैप पर भी देखें
आप मेरे उदाहरण में देख सकते हैं फ़ॉन्ट आकार और पृष्ठभूमि रंग स्क्रीन आकार के अनुसार बदल रहे हैं
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
/* Custom, iPhone Retina */
@media(max-width:320px){
body {
background-color: lime;
font-size:14px;
}
}
@media only screen and (min-width : 320px) {
body {
background-color: red;
font-size:18px;
}
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
body {
background-color: aqua;
font-size:24px;
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
body {
background-color: green;
font-size:30px;
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
body {
background-color: grey;
font-size:34px;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
body {
background-color: black;
font-size:42px;
}
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is larger than the height, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>यहाँ एक और भी आसान स्टॉप सॉल्यूशन है, जिसमें मीडिया क्वेश्चन पर आधारित अलग-अलग रिस्पॉन्सिबल फाइल्स शामिल हैं।
यह सभी मीडिया क्वेरी लॉजिक को शामिल करता है और लॉजिक को केवल एक पेज, लोडर पर मौजूद होना चाहिए। यह मीडिया के प्रश्नों को उत्तरदायी स्टाइलशीट को स्वयं अव्यवस्थित करने की अनुमति नहीं देता है।
//loader.less
// this twbs include adds all bs functionality, including added libraries such as elements.less, and our custom variables
@import '/app/Resources/less/bootstrap.less';
/*
* Our base custom twbs overrides
* (phones, xs, i.e. less than 768px, and up)
* no media query needed for this one since this is the default in Bootstrap
* All styles initially go here. When you need a larger screen override, move those
* overrides to one of the responsive files below
*/
@import 'base.less';
/*
* Our responsive overrides based on our breakpoint vars
*/
@import url("sm-min.less") (min-width: @screen-sm-min); //(tablets, 768px and up)
@import url("md-min.less") (min-width: @screen-md-min); //(desktops, 992px and up)
@import url("large-min.less") (min-width: @screen-lg-min); //(large desktops, 1200px and up)base.less इस तरह दिखेगा
/**
* base.less
* bootstrap overrides
* Extra small devices, phones, less than 768px, and up
* No media query since this is the default in Bootstrap
* all master site styles go here
* place any responsive overrides in the perspective responsive sheets themselves
*/
body{
background-color: @fadedblue;
}sm-min.less इस तरह दिखेगा
/**
* sm-min.less
* min-width: @screen-sm-min
* Small devices (tablets, 768px and up)
*/
body{
background-color: @fadedgreen;
}आपके सूचकांक को बस लोडर को लोड करना होगा
<link rel="stylesheet/less" type="text/css" href="loader.less" />बहुत आसान..
बूटस्ट्रैप मुख्य रूप से हमारे लेआउट, ग्रिड सिस्टम और घटकों के लिए हमारे स्रोत Sass फ़ाइलों में निम्न मीडिया क्वेरी श्रेणियों - या ब्रेकप्वाइंट का उपयोग करता है।
अतिरिक्त छोटे डिवाइस (पोर्ट्रेट फ़ोन, 576px से कम) xsबूटस्ट्रैप में डिफ़ॉल्ट नहीं है क्योंकि इसके लिए कोई मीडिया क्वेरी नहीं है
छोटे उपकरण (लैंडस्केप फोन, 576px और ऊपर)
@media (min-width: 576px) { ... }मध्यम उपकरण (टैबलेट, 768px और ऊपर)
@media (min-width: 768px) { ... }बड़े उपकरण (डेस्कटॉप, 992px और ऊपर)
@media (min-width: 992px) { ... }अतिरिक्त बड़े उपकरण (बड़े डेस्कटॉप, 1200px और ऊपर)
@media (min-width: 1200px) { ... }चूँकि हम अपने स्रोत CSS को Sass में लिखते हैं, हमारे सभी मीडिया प्रश्न Sass मिश्रण के माध्यम से उपलब्ध हैं:
प्रभावी रूप से xs ब्रेकपॉइंट के लिए कोई मीडिया क्वेरी आवश्यक नहीं है @media (min-width: 0) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }इसे गहराई से समझने के लिए कृपया नीचे दिए गए लिंक पर जाएं
@मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 1200px) {}
@मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 979px) {}
@मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 767px) {}
@मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 480px) {}
@मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 320px) {}
@मीडिया (न्यूनतम-चौड़ाई: 768px) और (अधिकतम-चौड़ाई: 991px) {}
@मीडिया (न्यूनतम-चौड़ाई: 992px) और (अधिकतम-चौड़ाई: 1024px) {}
IE के लिए मीडिया क्वेरीज़ का उपयोग करें;
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
and (orientation : portrait) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}:)
नवीनतम बूटस्ट्रैप (4.3.1) में, SCSS (SASS) का उपयोग करके आप @mixin से एक का उपयोग कर सकते हैं /bootstrap/scss/mixins/_breakpoints.scss
कम से कम ब्रेकपॉइंट की चौड़ाई का मीडिया। सबसे छोटी ब्रेकपॉइंट के लिए कोई क्वेरी नहीं। @Content दिए गए ब्रेकपॉइंट और व्यापक पर लागू होता है।
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
अधिकतम ब्रेकपॉइंट की चौड़ाई का मीडिया। सबसे बड़े ब्रेकपॉइंट के लिए कोई क्वेरी नहीं। @Content दिए गए ब्रेकपॉइंट और संकरे पर लागू होता है।
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints)
मीडिया जो कई विराम बिंदुओं को फैलाता है। मिनट और अधिकतम ब्रेकप्वाइंट के बीच @content लागू होता है
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)
ब्रेकपॉइंट की न्यूनतम और अधिकतम चौड़ाई के बीच मीडिया। सबसे छोटे ब्रेकपॉइंट के लिए कोई न्यूनतम नहीं, और सबसे बड़े के लिए कोई अधिकतम नहीं। @Content केवल दिए गए ब्रेकपॉइंट पर लागू होता है, किसी भी व्यापक या संकरे दृश्य को नहीं देखता है।
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints)
उदाहरण के लिए:
.content__extra {
height: 100%;
img {
margin-right: 0.5rem;
}
@include media-breakpoint-down(xs) {
margin-bottom: 1rem;
}
}प्रलेखन:
खुश कोडिंग;)
मुख्य प्रतिक्रिया में सुधार करने के लिए:
आप केवल उपयोगकर्ता की आवश्यकता वाले कोड को डाउनलोड करने के लिए टैग की मीडिया विशेषता <link>(यह मीडिया के प्रश्नों का समर्थन करते हैं) का उपयोग कर सकते हैं।
<link href="style.css" rel="stylesheet">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">इसके साथ, ब्राउज़र सभी सीएसएस संसाधनों को डाउनलोड करेगा, मीडिया विशेषता की परवाह किए बिना । अंतर यह है कि यदि मीडिया विशेषता के मीडिया-क्वेरी का मूल्यांकन गलत है तो वह .css फ़ाइल और उसकी सामग्री रेंडर-ब्लॉक नहीं की जाएगी।
इसलिए, इसमें मीडिया विशेषता का उपयोग करने की अनुशंसा की जाती है<link> टैग क्योंकि यह एक बेहतर उपयोगकर्ता अनुभव की गारंटी देता है।
यहाँ आप इस मुद्दे के बारे में एक Google लेख पढ़ सकते हैं https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
कुछ उपकरण जो आपके मीडिया-क्वेरी के अनुसार अलग-अलग फाइलों में आपके सीएसएस कोड को अलग करने में आपकी मदद करेंगे
वेबपैक https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin
पोस्टसीएसएस https://www.npmjs.com/package/postcss-extract-media-query