Làm cách nào để tăng kích thước phông chữ dựa trên chiều rộng cửa sổ?

Question

Tôi đang tạo một ứng dụng dựa trên web sẽ được hiển thị trên TV và các màn hình lớn khác. Tôi muốn một cách nhanh chóng và dễ dàng để tăng kích thước phông chữ để phù hợp với kích thước cửa sổ. Văn bản là động.

Bất kỳ trợ giúp nào được đánh giá cao. ;)

Answer 1

OK - để bắt đầu, bạn nên sử dụng Ems cho nhiều số đo nhất có thể trong giao diện người dùng của mình. Ít nhất, kích thước tất cả các yếu tố văn bản của bạn với Ems (thay vì pixel hoặc%). Nếu có thể, việc thiết lập chiều rộng của khối bố cục trong Ems cũng sẽ giúp tỷ lệ ứng dụng tương ứng. Nếu bạn có thể đặt tất cả các thứ nguyên của mình trong Ems, toàn bộ ứng dụng của bạn sẽ có thể mở rộng bằng hình ảnh.

Chìa khóa để Ems là chúng có kích thước tương đối với kích thước phông chữ của phần tử gốc - có nghĩa là bạn có thể điều chỉnh kích thước của tất cả văn bản theo tỷ lệ, bằng cách điều chỉnh kích thước phông chữ của phần tử cơ thể (mọi thứ đều liên quan đến cơ thể).

Bước cuối cùng là sử dụng một đoạn javascript để phát hiện chiều rộng của chế độ xem và đặt kích thước phông chữ của phần thân theo đó. Tùy thuộc vào mức độ chi tiết bạn muốn kiểm soát tỷ lệ, bạn có thể sử dụng các lớp trên phần tử cơ thể để thiết lập một tập hợp các giá trị được xác định trước hoặc trực tiếp thao tác với kích thước phông chữ. Tôi có xu hướng sử dụng các kích thước được xác định trước nếu có thể để làm cho thử nghiệm dễ dàng hơn.

Tôi muốn sử dụng thư viện javascript để làm cho việc phát hiện chiều rộng của chế độ xem dễ dàng hơn - nó khác biệt rõ rệt trong các trình duyệt khác nhau. Với jQuery, các mã có thể trông giống như:

$(function(){ 
    var viewPortWidth = $(window).width(); 

    if (viewPortWidth > 1900) {$('body').addClass('extraWide')} 
    else if (viewPortWidth > 1400) {$('body').addClass('wide')} 
    else if (viewPortWidth > 1000) {$('body').addClass('standard')} 
    else if (viewPortWidth > 700) {$('body').addClass('narrow')} 
    else {$('body').addClass('extraNarrow')} 

}); 

Và CSS:

<style type="text/css"> 

    body {font-size:62.5%;} /* Set the size of 1em to 10px in all browsers */ 

    body.extraWide {font-size:85%;} 
    body.wide {font-size:75%;} 

    body.narrow {font-size:50%;} 
    body.extraNarrow {font-size:40%;} 

</style> 

Những giá trị có thể được tinh chỉnh tuy nhiên bạn thích, tất nhiên, và bạn có thể thiết lập nhiều bộ phận như bạn muốn . Đây là một giải pháp nhanh chóng và bẩn thỉu, nhưng nên làm điều này.

Lưu ý - mã javascript được hiển thị sẽ chỉ đặt tỷ lệ khi trang được tải - nó sẽ không điều chỉnh khi bạn thay đổi kích thước cửa sổ của mình. Đó là một bổ sung có thể, nhưng có những cân nhắc lớn hơn trước khi đi xuống theo dõi đó. Cá nhân, tôi thậm chí còn nghĩ đến việc thiết lập giá trị quy mô trong một cookie, để giữ cho trải nghiệm của người dùng nhất quán trong suốt phiên của họ, thay vì rescaling trên mỗi lần tải trang.

Answer 2

Nếu bạn quan tâm đến/thể sử dụng CSS3 sau đó là một giải pháp CSS tinh khiết - phương tiện truyền thông truy vấn >>http://www.w3.org/TR/css3-mediaqueries/

Vì vậy, ví dụ, CSS:

@media screen and (min-device-width: 800px) { ... } 

... cho phép bạn chỉ định các kiểu khác nhau cho trang khi được hiển thị trên màn hình 800px trở lên. Rõ ràng, bạn có thể thay đổi này theo ý muốn - những thứ mạnh mẽ

Bạn cũng có thể muốn xem xét các javascript prewritten ở phần cuối của liên kết này ... http://www.themaninblue.com/experiment/ResolutionLayout/#

Answer 3

câu trả lời Beejamin của làm việc như mong đợi, tôi đã thêm một thời gian chờ bộ vì vậy nó sẽ mở rộng theo thời gian thực. Nó không đảo ngược quy mô mặc dù.

$(document).ready(function() {scaleFont();}); 

    function scaleFont() { 

     var viewPortWidth = $(window).width(); 

     if (viewPortWidth > 1900) {$('body').addClass('extraWide')} 
     else if (viewPortWidth > 1400) {$('body').addClass('wide')} 
     else if (viewPortWidth > 1000) {$('body').addClass('standard')} 
     else if (viewPortWidth > 700) {$('body').addClass('narrow')} 
     else {$('body').addClass('extraNarrow')} 

     setTimeout(scaleFont, 100); 
    } 

EDIT: SOLVED REVERSE HIỆU LỰC

$(document).ready(function() {scaleFont();}); 

    function scaleFont() { 

     var viewPortWidth = $(window).width(); 

     if (viewPortWidth >= 1900) {$('body').addClass('extraWide').removeClass('wide, standard, narrow, extraNarrow')} 
     else if (viewPortWidth >= 1400) {$('body').addClass('wide').removeClass('extraWide, standard, narrow, extraNarrow')} 
     else if (viewPortWidth >= 1000) {$('body').addClass('standard').removeClass('extraWide, wide, narrow, extraNarrow')} 
     else if (viewPortWidth >= 700) {$('body').addClass('narrow').removeClass('extraWide, standard, wide, extraNarrow')} 
     else {$('body').addClass('extraNarrow').removeClass('extraWide, standard, wide, narrow')} 


     setTimeout(scaleFont, 100); 
    } 

Answer 4

Heres một đơn giản và không jquery giải pháp:

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

Answer 5

Một phiên bản tốt hơn (cho tôi) của giải pháp được cung cấp bởi japanFour :

$(document).ready(scaleFont); 
$(window).resize(scaleFont); 


function scaleFont() { 

    var viewPortWidth = $(window).width(); 

    if (viewPortWidth >= 1900) {$('body').attr('class','extraWide');} 
    else if (viewPortWidth >= 1400) {$('body').attr('class','wide');} 
    else if (viewPortWidth >= 1000) {$('body').attr('class','');} 
    else if (viewPortWidth >= 700) {$('body').attr('class','narrow');} 
    else {$('body').attr('class','extraNarrow');} 
} 

Vì vậy, nó thay đổi kích thước chỉ nếu cửa sổ được thay đổi kích cỡ (tránh setTimout), và bạn cung cấp cho body chỉ lớp chính xác nó cần

Answer 6

Dưới đây sẽ là cách tiếp cận của tôi (với loại bỏ các lớp học thực tế + Drupal 7 jQuery):

(function ($) { 
$(document).ready(function() { 


var bodyClassArr = new Array('extraWide', 'wide', 'normal', 'narrow', 'extraNarrow', 'mobile'); 

function setBodyClass(){ 
    // remove previous classes 
    for(x in bodyClassArr){ 
     if($('body').hasClass(bodyClassArr[x])){ $('body').removeClass(bodyClassArr[x]); } 
    } 
    var viewPortWidth = $(window).width(); 
    if (viewPortWidth > 1900) { $('body').addClass('extraWide'); } 
    else if (viewPortWidth > 1400) { $('body').addClass('wide'); } 
    else if (viewPortWidth > 1000) { $('body').addClass('normal'); } 
    else if (viewPortWidth > 700) { $('body').addClass('narrow'); } 
    else if (viewPortWidth < 700) { $('body').addClass('mobile'); } 
    else { $('body').addClass('normal'); } 
}; 
setBodyClass(); 

$(window).resize(function() { setBodyClass(); }); 

}); // jquery end 
}(jQuery)); 

Answer 7

Tôi biết điều này trong một câu hỏi khá cũ, nhưng tôi sẽ trả lời anyways do đây là một câu hỏi mà có thể được tìm kiếm rất nhiều.

Có thực sự là một cách tiếp cận khác so với truy vấn phương tiện đó cũng là CSS tinh khiết:

---

đơn vị Viewport:vw, vh, vmin, vmax.

Đây là các đơn vị độ dài chiếm 1% kích thước khung nhìn cho chiều rộng khung nhìn (vw), chiều cao (vh), nhỏ hơn của hai (vmin) hoặc lớn hơn của hai (vmax).

Vì vậy, ví dụ bạn có thể sử dụng:

CSS:

body { 
    font-size:5vmin; 
} 

này đặt font-size của toàn bộ tài liệu đến 5% kích thước viewport nhỏ (chiều rộng hoặc chiều cao). Ví dụ: trên iPad (1024 x 768 px) font-size sẽ là 38,4 px(5% 768 px vì đây là kích thước nhỏ nhất của kích thước khung nhìn).

---

Như tuyệt vời như thế này nghe có vẻ nó chưa đi kèm với một vài vấn đề cần được xem xét:

• Chrome không hỗ trợ các đơn vị viewport cho border widths, column gaps, transform values, box shadows hoặc trong calc() cho đến Phiên bản 34;
• Safari & iOS Safari(cả 6 và 7) không không đơn vị hỗ trợ khung nhìn cho border widths, column gaps, transform values, box shadows hoặc trong calc();
• iOS 7 Safari đặt giá trị đơn vị chế độ xem thành 0 nếu trang đã được để lại và được trả về sau 60 giây;
• Internet Explorer 9 trong chế độ in diễn giải vh dưới dạng trang. 30vh = 30 trang;
• iOS 7 Safari tính toán lại độ rộng được đặt bằng vh là vw và chiều cao được đặt bằng vw là vh khi định hướng thay đổi.

Nguồn:http://caniuse.com/#feat=viewport-units

Answer 8

Có gì không ổn với đoạn mã sau? Trong khi tôi đồng ý các truy vấn phương tiện truyền thông rất hữu ích, tôi muốn liên tục mở rộng kích thước phông chữ của các yếu tố nhất định trên trang của tôi khi cửa sổ tăng hoặc thu nhỏ. Mã này có vẻ đơn giản hơn nhiều so với các giải pháp jquery khác của việc thiết lập các hằng đẳng cấp dựa trên chiều rộng khung nhìn điểm ảnh:

$(document).ready(function() { 

    var setFontSize = function() { 
    var viewportWidth = $(window).width(); 
    var fontSize = Math.sqrt(viewportWidth/250); 
    $('.myElement').css('font-size',fontSize+'em'); 
    }; 

    $(window).resize(function() { 
    setFontSize(); 
    }); 

    setFontSize(); 

});