tự động thay đổi kích thước văn bản (cỡ chữ) khi thay đổi kích thước cửa sổ?

Question

Tôi đã cố gắng (vô ích) để xây dựng một trang có các yếu tố sẽ thay đổi kích thước khi tôi thay đổi kích thước cửa sổ. Tôi có nó làm việc trong css cho hình ảnh không có vấn đề, nhưng tôi dường như không thể thực hiện tương tự cho văn bản, và tôi không chắc chắn nó thậm chí có thể trong CSS. Và tôi dường như không thể tìm thấy một kịch bản jquery hoàn thành điều này.

Khi người dùng định lại kích thước cửa sổ, về bản chất tôi muốn trang mở rộng động và linh hoạt mà không cần người dùng phải gọi thu phóng trang. Điều này làm việc tốt trên div img của tôi thông qua css, nhưng không cho văn bản, mà vẫn ở cùng kích thước.

Bất kỳ ý tưởng nào?

Answer 1

Tôi phải tự mình làm điều này. Những gì tôi đã làm là tôi thiết lập một kích thước văn bản cơ bản cho cơ thể, và tỷ lệ phần trăm cho tất cả các kích cỡ khác. Sau đó tôi đã sử dụng một kịch bản lệnh jQuery đơn giản để thay đổi kích thước cơ sở về thay đổi kích thước cửa sổ. Các kích thước khác sau đó cũng cập nhật.

tôi đã sử dụng một cái gì đó như thế này:

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

và trong resizeMe chức năng, tôi có điều này:

//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); 

Answer 2

Bạn có thể làm điều này với CSS3 media queries, xác định cơ sở khác nhau font-kích thước tùy thuộc vào kích thước trình duyệt. Có một bài viết tốt cho việc này trên A List Apart

Để được hỗ trợ IE bạn có thể hack nó bằng cách sử CSS expressions

này đòi hỏi bạn phải sử dụng một cơ sở cố định font-size, ví dụ trên thẻ body, và tỷ lệ phần trăm hoặc kích thước dựa trên em ở nơi khác.

Answer 3

Thử plugin jQuery như FitText. Nó tự động kích thước văn bản cho vừa với chiều rộng của phần tử gốc.

Một plugin jQuery khác có cùng mục tiêu là BigText (demo).

Answer 4

Câu trả lời của Lizzan là hoàn hảo! Để lại -1 nó ở đâu! Mèo con đã chết khắp nơi khi tôi gỡ bỏ nó.

Thay vì biến phông chữ, chỉ cần đặt biến thành phông chữ chuẩn cho trang của bạn. Mine là 16.

Answer 5

Tôi đang sử dụng các trick từ http://practicaltypography.com/end-credits.html#bio M. 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> 

Answer 6

roryf là đi đúng hướng!

Truy vấn phương tiện là (một trong) (các) câu trả lời.

Bí quyết ở đây là sử dụng% cho kích thước phông chữ ở mọi nơi bắt đầu từ cơ thể. Bằng cách này, kích thước của font chữ được thừa hưởng và khi bạn thay đổi nó trong cơ thể, nó được thay đổi ở khắp mọi nơi.

Hãy thử một cái gì đó như:

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

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

Khi chiều rộng trang web được nhỏ hơn sau đó 600px, sau đó kích thước phông chữ sẽ chuyển sang 70% của những gì nó đã ở khắp mọi nơi, nơi% được sử dụng (còn h1 trong ví dụ này.)

Answer 7

Xây dựng về câu trả lời Lizzan của, đây là một phiên bản sử dụng căn bậc hai của cả chiều rộng và chiều cao để có được một kích thước theo tỷ lệ:

// 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'); 

}); 

Demo: http://jsfiddle.net/tomsoderlund/26Gad/embedded/result/

Answer 8

Bạn có thể làm cho văn bản resizible đơn giản hơn. Giải pháp này làm việc cho tôi. http://jsfiddle.net/VooDi/dka48dx8/

Đối với kích thước phông chữ của bộ cơ thể, tương đương với chiều rộng cửa sổ hiện tại của bạn;

cho jsfiddle 560 px;

body { 
    font-size: 560px; 
} 

js:

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

và cho các phần tử thiết lập kích thước phông chữ cần thiết theo phần trăm

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

Thats tất cả. Hy vọng điều này sẽ giúp một ai đó.