ज़ूम इन/आउट करते समय मैं विकृत होने से सीएसएस लेआउट को कैसे रोकूं?

Question

मैंने #container div के साथ एक बहुत ही मूल साइट स्थापित की है जिसमें #navbar और #content शामिल है। हालांकि, जब मैं ज़ूम इन या आउट करता हूं, #navbar विकृत करता है, यदि मैं लिंक में ज़ूम करता हूं तो इनलाइन होने के बजाय एक दूसरे के नीचे धक्का दिया जाता है। यदि मैं ज़ूम आउट करता हूं, तो लिंक के बीच बहुत अधिक पैडिंग जोड़ा जाता है। मैं इसे कैसे रोक सकता हूँ?

HTML:

<div id="navbar"> 
<ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="top.html">Top</a></li> 
    <li><strong><a href="free.html">FREE</a></strong></li> 
    <li><a href="photo.html">Photo</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="contact.html">Contact Us</a></li> 
</ul> 
</div> 

<div id="content"> 

<p>Some sample text.<p> 

</div> 


</div> 

सीएसएस:

#container { 

    position: static; 
    background-color: #00bbee; 
    margin-left: 20%; 
    margin-right: 20%; 
    margin-top: 7%; 
    margin-bottom: 15%; 
    border: 2px solid red; 


} 

#navbar ul{ 

    list-style: none; 



} 

#navbar li{ 

    display: inline; 

} 

#navbar li a{ 

    text-decoration: none; 
    color: #11ff11; 
    margin: 3%; 
    border: 1px dotted orange; 
    padding-left: 4px; 

} 

#navbar li a:hover { 

    background-color: white; 
    color: green; 

} 

#navbar { 

    background-color: #eeeeee; 
    padding-top: 2px; 
    padding-bottom: 5px; 
    border: 1px solid yellow; 

} 

मैं इसे कैसे विकृत से रोक सकते हैं?

इसके अलावा, मैं अभी भी बहुत सीएसएस के लिए नया हूँ, मैं पिक्सल के बजाय% का उपयोग करने के लिए सिखाया गया था। क्या वह सही है? इसके अलावा आपको कुछ भी इंगित करना है, कृपया मुझे बताएं।

अग्रिम धन्यवाद!

Answer 1

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

सीएसएस मीडिया क्वेरी:

@media screen and (max-width: 320px) { 

/*Write your css here*/ 

} 

@media screen and (max-width: 800px) { 

} 

चेक आउट: CSS-Tricks + device sizes और Media Queries

Answer 2

विभिन्न ब्राउज़र उपयोगकर्ता ज़ूम के लिए विभिन्न तकनीकों। उनमें से सभी दोष हैं। प्रतिशत का उपयोग गोलिंग त्रुटियों को पेश करेंगे। कोई आसान जवाब नहीं हैं।

देखें: http://www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html

Answer 3

हम्म .... आप अभी तक न्यूनतम-चौड़ाई/मिनट ऊंचाई संपत्तियों में जोड़ने की कोशिश की? आप बस अपने #container div पर उन गुणों को शामिल कर सकते हैं। यह सिर्फ चाल चल सकता है।

Answer 4

मैं एक ऐसी ही समस्या यह है कि मैं अपने नेविगेशन मेनू के चारों ओर एक अतिरिक्त div जोड़कर तय किया था। मैं तो जोड़ा निम्नलिखित

#menu-container { 
    position: absolute; 
    white-space: nowrap; 
    overflow: hidden; 

} 

यह रैपिंग से रोका। मुझे भरोसा है ये काम करेगा।

Answer 5

उसे ज़ूम के साथ समस्या को ठीक करने के लिए, अपने बाहरी countainer को min-width विशेषता जोड़ने की कोशिश (#container या #navbar?)। min-width सेट करना वेबपृष्ठ को निर्दिष्ट चौड़ाई (यानी 300px) से नीचे घटने की कोशिश करने से रोकता है। यदि आप बहुत दूर ज़ूम करते हैं, तो <div> के अंदर के तत्वों की बजाय अगली पंक्ति पर कूदते हुए, आपकी navbar कम हो जाती है और पृष्ठ के निचले हिस्से में स्क्रॉलबार दिखाई देगा।

उदाहरण (अपने स्टाइलशीट में):

#navbar {min-width:300px;} 

इस को प्राप्त करने का एक और अच्छा तरीका पेज शरीर के लिए न्यूनतम-चौड़ाई विशेषता लागू किया जा सके।

उदाहरण (अपने स्टाइलशीट में):

body {min-width:300px;} 

अंत में, आप अपने नेवबार पेज की पूरी चौड़ाई अवधि बनाना चाहते हैं तो, {clear:both;} स्टाइलशीट में इस्तेमाल करते हैं।

Answer 6

मैं सिर्फ सभी तत्वों पृष्ठ पर/divs करने के लिए पूर्ण ऊंचाई और चौड़ाई निर्धारित करेंगे।

आईडी {ऊंचाई: 250px; चौड़ाई: 500px}

या आप भी न्यूनतम/अधिकतम-चौड़ाई/hight इस्तेमाल कर सकते हैं विभिन्न आकारों या जब ब्राउज़र विंडो का आकार पर पेज लेआउट समायोजित करने के लिए।

Answer 7

यह मुख्य रूप से इसलिए है क्योंकि आपने प्रतिशत में अपनी चौड़ाई या मार्जिन गुण निर्धारित किए हैं। यदि आप ऐसा करते हैं तो सुनिश्चित करें कि आप इस तत्व को अधिकतम चौड़ाई प्रदान करते हैं

Answer 8

यहां आप जाते हैं, यह उपर्युक्त सुझावों की तरह है, लेकिन यदि आप पूर्ण चौड़ाई की तलाश में हैं तो इसकी एक निश्चित चौड़ाई सामग्री क्षेत्र है, मुझे खेद है (; _;)

<style> 
body { 
    margin:0px; 
} 
#container { 
    width:990px; 
    background-color: #00bbee; 
    margin:0 auto; 
    border: 2px solid red; 
} 
#navbar ul { 
    list-style: none; 
} 
#navbar li { 
    display: inline; 
} 
#navbar li a { 
    text-decoration: none; 
    color: #11ff11; 
    margin: 3%; 
    border: 1px dotted orange; 
    padding-left: 4px; 
} 
#navbar li a:hover { 
    background-color: white; 
    color: green; 
} 
#navbar { 
    background-color: #eeeeee; 
    padding-top: 2px; 
    padding-bottom: 5px; 
    border: 1px solid yellow; 
} 
</style> 

<div id="container"> 
    <div id="navbar"> 
    <ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="top.html">Top</a></li> 
     <li><strong><a href="free.html">FREE</a></strong></li> 
     <li><a href="photo.html">Photo</a></li> 
     <li><a href="about.html">About</a></li> 
     <li><a href="contact.html">Contact Us</a></li> 
    </ul> 
    </div> 
    <div id="content"> 
    <p>Some sample text. 
    <p> 
    </div> 
</div> 

Answer 9

आप एक सीएसएस मीडिया क्वेरी का उपयोग करने के लिए अपने सीएसएस में विभिन्न शैलियों के लिए ब्रेक अंक सेट करना चाहते हैं जा रहे हैं। जो सही ढंग से उपयोग किया जाता है तो किसी विकृति के मुद्दों को ठीक करेगा।