उपयोग सीएसएस बदल देती है या जावास्क्रिप्ट एक तत्व पैमाने पर करने के अपनी मूल फिट करने के लिए गतिशील रूप से

Question

मैं एक पेज जिसमें मैं <div> तत्वों का एक पहिया है है, जब आप एक बटन पर क्लिक करें पूरे पहिया घूमता है।

मैं सीएसएस रूपांतरण है, जो प्रकृति में पूर्ण कर रहे हैं का उपयोग करके इस प्रभाव को प्राप्त। हालांकि पहिया बहुत बड़ा है, यह मेरे एचडी डिस्प्ले पर अच्छा लग रहा है, लेकिन छोटी स्क्रीन किनारों को काट देती है। मैं सामान्य चौड़ाई के साथ% चौड़ाई का उपयोग नहीं कर सकता, मुझे जो चाहिए वह पूरे पृष्ठ को स्केल करना है, वैसे ही अधिकांश ब्राउज़र ज़ूम फ़ंक्शन काम करते हैं।

अपने आप के लिए मुझे पता है कि सीटीआर + माउसव्हील तो मैं पूरे पृष्ठ को देख सकते हैं बाहर पृष्ठ ज़ूम जाएगा, हालांकि मैं दूसरों ऐसा करने के लिए उम्मीद नहीं कर सकते।

मुझे पता है कि मैं प्रभाव प्राप्त करने के लिए एक रैपर div पर -browser-transform: scale(amt); का उपयोग कर सकता हूं, हालांकि मैं इसे गतिशील रूप से करने का कोई तरीका नहीं समझ सकता। यदि मैं स्केल को .5 पर सेट करता हूं तो यह 5 होगा, स्क्रीन पर कोई फर्क नहीं पड़ता। मैं चाहता हूं कि किसी भी स्क्रीन पर स्क्रीन के किनारों से पहिया के किनारों को केवल कुछ पिक्सल हों। मुझे पता है कि समस्या का समाधान करने के लिए मीडिया प्रश्नों का उपयोग किया जा सकता है, लेकिन वे मुझे ऐसे परिणामों के साथ छोड़ देंगे जो आदर्श से कम हैं, या बहुत से अलग प्रश्नों की आवश्यकता है। -browser-transform: scale(amt); प्रोग्रामेटिक रूप से, या सीमित नियंत्रण रखने के किसी अन्य तरीके को संशोधित करने का एक तरीका होना चाहिए।

कोई विचार?

Answer 1

आप सीएसएस में मीडिया के प्रश्नों का उपयोग कर विभिन्न स्क्रीन लक्षित करने के लिए कोशिश की है। उदाहरण के लिए, अपनी सीएसएस फ़ाइल में एक मीडिया क्वेरी है जो बताती है कि 320 - 480 पिक्सेल की चौड़ाई पर, इस पहिया वाले div को 50% तक स्केल किया गया है। फिर 481-768 पिक्सल पर, div कंटेनर को 75% तक बढ़ा दिया जाता है। और 769 पिक्सेल से ऊपर, div को 100% तक बढ़ा दिया गया है।

है कि आप की मदद करनी चाहिए स्केलिंग आप अलग अलग स्क्रीन आकार में चाहते हैं गतिशील पूरा। यदि आप डेमो चाहते हैं, तो मुझे यह दिखाने में खुशी होगी कि यह एक जेएसफ़िल्ड दिखा रहा है।