2010-06-07 27 views
14

मैं एक पृष्ठ बनाने के लिए कोशिश कर रहा हूं (व्यर्थ में) जिसका तत्व आकार बदल जाएगा क्योंकि मैंने विंडो आकार बदल दिया है। मैंने छवियों के लिए सीएसएस में काम नहीं किया है, लेकिन मुझे टेक्स्ट के लिए इसे पूरा नहीं करना प्रतीत होता है, और मुझे यकीन नहीं है कि यह सीएसएस में भी संभव है। और मुझे ऐसा लगता है कि यह एक jquery स्क्रिप्ट नहीं मिल रहा है।स्वत: आकार बदलें टेक्स्ट (फ़ॉन्ट आकार)?

जब कोई उपयोगकर्ता विंडो का आकार बदलता है, तो मैं अनिवार्य रूप से पेज को ज़ूम करने के लिए पृष्ठ को गतिशील और तरलता से स्केल करना चाहता हूं। यह सीएसएस के माध्यम से मेरे आईएमजी divs पर ठीक काम करता है, लेकिन पाठ के लिए नहीं, जो एक ही आकार रहता है।

कोई विचार?

+0

अब तक आपके पास क्या कोड है? – ryanulit

उत्तर

34

मुझे इसे स्वयं करना है। मैंने जो किया वह था कि मैंने शरीर के लिए आधार टेक्स्ट आकार निर्धारित किया है, और अन्य सभी आकारों के लिए प्रतिशत निर्धारित किया है। मैंने फिर विंडो आकार बदलने के आधार आकार को बदलने के लिए एक साधारण jQuery स्क्रिप्ट का उपयोग किया। फिर अन्य आकार भी अपडेट होते हैं।

मैं कुछ इस तरह इस्तेमाल किया:

$(function() { 
    $(window).bind('resize', function() 
    { 
     resizeMe(); 
     }).trigger('resize'); 
    }); 

और resizeMe-समारोह में, मैं इस किया था:

//Standard height, for which the body font size is correct 
var preferredHeight = 768; 
//Base font size for the page 
var fontsize = 18; 

var displayHeight = $(window).height(); 
var percentage = displayHeight/preferredHeight; 
var newFontSize = Math.floor(fontsize * percentage) - 1; 
$("body").css("font-size", newFontSize); 
+0

मुझे विश्वास है कि एम 0% – Kyle

+0

प्रतिक्रिया के लिए धन्यवाद जैसा ही काम करता है। क्या आप मुझे इस्तेमाल की गई स्क्रिप्ट पर इंगित कर सकते हैं? धन्यवाद! – Stephen

+0

आपको बहुत बहुत धन्यवाद! – Stephen

7

आप CSS3 media queries के साथ ऐसा कर सकते हैं, के आधार पर अलग आधार फ़ॉन्ट आकार को निर्दिष्ट ब्राउज़र का आकार वहाँ A List Apart

पर इस के लिए एक अच्छा लेख आईई समर्थन के लिए आप का उपयोग कर इसे हैक करने में सक्षम CSS expressions

यह body टैग पर उदाहरण के लिए एक निश्चित आधार font-size उपयोग करने के लिए आवश्यक है कि आप हो सकता है, और प्रतिशत है या em आधारित आकार कहीं और।

12

FitText जैसे jQuery प्लगइन आज़माएं। यह मूल तत्व की चौड़ाई फिट करने के लिए स्वचालित रूप से टेक्स्ट आकार देता है।

एक ही लक्ष्य के साथ एक और jQuery प्लगइन BigText (demo) है।

0

Lizzans उत्तर सही है! -1 छोड़ दो जहां यह है! जब मैंने इसे हटा दिया तो बिल्ली के बच्चे सभी जगह मर रहे थे।

फ़ॉन्ट्स वैरिएबल के बजाय, इसे अपने पृष्ठ के लिए मानक फ़ॉन्ट्स पर सेट करें। मेरा 16.

था
3

मैं से http://practicaltypography.com/end-credits.html#bio एम Butterick चाल का उपयोग कर रहा:

<style type="text/css"> 
<!--adattamento font-size a browser width--> 
     @media all {html {font-size: 24px;}}@media all and (max-width:2200px){html {font-size: 27px;}}@media all and (max-width:1800px){html {font-size: 26px;}}@media all and (max-width:1400px){html {font-size: 25px;}}@media all and (max-width:1000px){html {font-size: 24px;}}@media all and (max-width:960px){html {font-size: 23px;}}@media all and (max-width:920px){html {font-size: 22px;}}@media all and (max-width:880px){html {font-size: 21px;}}@media all and (max-width:840px){html {font-size: 20px;}}@media all and (max-width:800px){html {font-size: 19px;}}@media all and (max-width:760px){html {font-size: 18px;}}@media all and (max-width:720px){html {font-size: 17px;}}@media all and (max-width:680px){html {font-size: 16px;}}@media all and (max-width:640px){html {font-size: 15px;}}@media all and (max-width:600px){html {font-size: 14px;}}@media all and (max-width:560px){html {font-size: 13px;}}@media all and (max-width:520px){html {font-size: 12px;}} 
<!--body-format--> 
      body { 
     max-width:1000px; 
     min-width:520px; 
     line-height:1.33em; 
     margin:1em; 
     background-color:#f7f7f7; 
     font-family:Source Sans Pro; 
     color:#361800; 
     } 
    </style> 
+1

आप थोड़ा और संदर्भ प्रदान करना चाहते हैं और अनुच्छेद * लिंक के लिए संदर्भ प्रदान करें * [मैं अच्छे उत्तरों कैसे लिखूं?] (Http://stackoverflow.com/help/how-to-answer)। – IInspectable

+0

मैंने केवल फ़ॉन्ट आकार की लाइन कॉपी की है .. वास्तव में अच्छा समाधान :) – oak

3

roryf सही रास्ते पर है!

मीडिया क्वेरीज़ (उत्तर) में से एक है।

यहां चाल हर जगह शरीर से शुरू होने वाले फ़ॉन्ट आकारों के लिए% का उपयोग करना है। इस तरह फ़ॉन्ट का आकार विरासत में मिलता है और जब आप इसे शरीर में बदलते हैं, तो यह हर जगह बदल जाता है।

की तरह कुछ का प्रयास करें:

body { font-size: 100% } 
h1 {font-size: 200% } 

@media all and (max-width:600px) { 
    body {font-size: 70%} 
} 

जब वेबसाइट चौड़ाई कम है तो 600px हो जाता है, तो फ़ॉन्ट आकार क्या यह हर जगह जहां% प्रयोग किया जाता है था, का 70% तक हो जाएगा (यह भी इस उदाहरण में एच 1।)

+0

अच्छा और सरल – Squirrl

4

बिल्डिंग Lizzan के जवाब पर, यहाँ चौड़ाई और ऊंचाई दोनों की वर्गमूल का उपयोग कर एक आनुपातिक आकार पाने के लिए एक संस्करण है:

// When document has finished loading 
$(document).ready(function() { 

    var resizeText = function() { 
     // Standard height, for which the body font size is correct 
     var preferredFontSize = 180; // % 
     var preferredSize = 1024 * 768; 

     var currentSize = $(window).width() * $(window).height(); 
     var scalePercentage = Math.sqrt(currentSize)/Math.sqrt(preferredSize); 
     var newFontSize = preferredFontSize * scalePercentage; 
     $("body").css("font-size", newFontSize + '%'); 
    }; 

    $(window).bind('resize', function() { 
     resizeText(); 
    }).trigger('resize'); 

}); 

डेमो: http://jsfiddle.net/tomsoderlund/26Gad/embedded/result/

0

आप resizible पाठ कर सकते हैं अधिक सरल। यह समाधान मेरे लिए काम करता है। http://jsfiddle.net/VooDi/dka48dx8/

शरीर सेट फ़ॉन्ट आकार के लिए, जो आपकी वर्तमान विंडो आंतरिक चौड़ाई के बराबर है;

jsfiddle 560 px के लिए;

body { 
    font-size: 560px; 
} 

js:

onresize=onload=function() { 
    document.body.style.fontSize=window.innerWidth+"px" 
} 

और आवश्यक तत्व सेट फ़ॉन्ट आकार के लिए प्रतिशत में

<h1 style="font-size:5%">Resize this text!!!!</h1> 

यही सब। उम्मीद है कि यह किसी की मदद करता है।

संबंधित मुद्दे