html - PHP media query width in php -

मुझे php में एक छोटी सी स्क्रिप्ट है:

  & lt; अनुभाग & gt; & Lt;? Php $ sql = "चुनें * से बिल्डर"; $ परिणाम = mysqli_query ($ db, $ एसक्यूएल); $ Counter = 1; जबकि ($ पंक्ति = mysqli_fetch_assoc ($ परिणाम)) {if ($ counter == 1) {echo "lt; img class = 'image' src = '$ row [bild_pfad]' alt = '$ row [bild_name]' शैली = '$ पंक्ति [bild_werte]' & gt; "; } Else {echo "& lt; img class = 'image image-margin' src = '$ row [bild_pfad]' alt = '$ row [bild_name]' शैली = '$ row [bild_werte]' & gt;"; } यदि ($ counter == 6) {$ counter = 1; } और {$ काउंटर = $ काउंटर + 1; }}? & Gt; & Lt; / अनुभाग & gt;  

यह स्क्रिप्ट "कई" छवियां बनाती है छवियों के लिए जानकारी एक डेटाबेस में हैं सामान्य मामले में & lt; अनुभाग & gt; & lt; / अनुभाग & gt; है 925px चौड़ाई 1 छवि 150px x 150px बड़ा है।

  .image {object-position: center; / * तत्व के अंदर छवि को केन्द्रित करें * / ऊंचाई: 150px; चौड़ाई: 150px; वस्तु-फिट: कवर; } .image-margin {margin-left: 5px; }  

सामान्य स्थिति में 6 चित्रों की तरफ, 5px के बाएं मार्जिन के साथ। यही वजह है कि मैंने स्क्रिप्ट में $ counter का उपयोग किया, क्योंकि एक पंक्ति में 6 चित्र हैं और पहली तस्वीर को मार्जिन बाएं की आवश्यकता नहीं है। अब मैंने कुछ मीडिया प्रश्नों का इस्तेमाल किया

<प्री> @ मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 9 24 पीएक्स) {अनुभाग {मार्जिन: 0 पीएक्स ऑटो; चौड़ाई: 770px; मार्जिन-टॉप: 55 पीएक्स; }} @ मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 770 पीएक्स) {अनुभाग {मार्जिन: 0 पीएक्स ऑटो; चौड़ाई: 615 पीएक्स; मार्जिन-टॉप: 55 पीएक्स; }} @ मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 615 पीएक्स) {अनुभाग {मार्जिन: 0 पीएक्स ऑटो; चौड़ाई: 460px; मार्जिन-टॉप: 55 पीएक्स; }} @ मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 460 पीएक्स) {अनुभाग {मार्जिन: 0 पीएक्स ऑटो; चौड़ाई: 305px; मार्जिन-टॉप: 55 पीएक्स; }}

प्रत्येक मीडिया क्वेरी वर्ग पंक्ति 1 से हटना छोड़ देता है और तस्वीर अगले पंक्ति में जाती है मेरी समस्या: स्क्रिप्ट में मैंने 6 तस्वीरों को एक पंक्ति में सेट किया है, मैं मीडिया प्रश्नों के लिए इसे कैसे कस्टमाइज़ कर सकता हूं? (5-, 4-, 3-, 2- एक पंक्ति में चित्रों के लिए)

न करें निर्धारित करने के लिए एक काउंटर चर का उपयोग करें जहां मार्जिन होना चाहिए।

अपने मार्जिन सही पर सेट करें और पंक्ति में पिछली छवि से मार्जिन हटाएं।

  @ मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 9 24 पीएक्स) {/ * प्रत्येक पंक्ति में पांच छवियाँ * / अनुभाग {मार्जिन: 0 पिक्स ऑटो; चौड़ाई: 770px; मार्जिन-टॉप: 55 पीएक्स; } अनुभाग img {मार्जिन-दाएं: 5px; } अनुभाग img: nth-child (5n + 5) {मार्जिन सही: 0; }} @ मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 770 पिक्स) {/ * प्रत्येक पंक्ति में चार छवियां * / अनुभाग {मार्जिन: 0 पिक्सेर ऑटो; चौड़ाई: 615 पीएक्स; मार्जिन-टॉप: 55 पीएक्स; } अनुभाग img: nth-child (4n + 4) {मार्जिन सही: 0; }}