Kích thước phông chữ so với độ phân giải màn hình của người dùng?

Question 1

Tôi có một trang web linh hoạt và menu chiếm 20% chiều rộng của nó. Tôi muốn kích thước phông chữ của menu được đo chính xác để nó luôn vừa với chiều rộng của hộp và không bao giờ bị lệch sang dòng tiếp theo. Tôi đã nghĩ đến việc sử dụng "em" như một đơn vị nhưng nó liên quan đến kích thước phông chữ của trình duyệt, vì vậy khi tôi thay đổi độ phân giải, kích thước phông chữ vẫn giữ nguyên.

Cũng đã thử pts và tỷ lệ phần trăm. Không có gì hoạt động như tôi cần ...

Vui lòng cho tôi gợi ý về cách tiếp tục.

Question 2

@media screen and (max-width : 320px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}
@media screen and (max-width : 1204px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}

Bạn có thể cung cấp thủ công tùy theo kích thước màn hình của màn hình, chỉ cần có giao diện với kích thước màn hình khác nhau và thêm kích thước phông chữ theo cách thủ công.

Question 3

Bạn có thể sử dụng em, %, px. Nhưng kết hợp với media-queries Xem liên kết này để tìm hiểu về truy vấn phương tiện. Ngoài ra, CSS3 có một số giá trị mới cho kích thước điều tương đối so với kích thước khung nhìn hiện tại: vw, vh, và vmin. Xem liên kết về điều đó.

Question 4

Cách mới

Có một số cách để đạt được điều này.

CSS3 hỗ trợ các thứ nguyên mới có liên quan đến cổng xem. Nhưng điều này không hoạt động trong Android.

3.2vw = 3.2% chiều rộng của khung nhìn
3.2vh = 3.2% chiều cao của khung nhìn
3.2vmin = Nhỏ hơn 3.2vw hoặc 3.2vh
3.2vmax = Lớn hơn 3.2vw hoặc 3.2vh
```
body
{
    font-size: 3.2vw;
}
```

xem css-tricks.com / .... và cũng xem caniuse.com / ....

Cách cũ

Sử dụng truy vấn phương tiện nhưng yêu cầu kích thước phông chữ cho một số điểm ngắt

body
{
    font-size: 22px; 
}
h1
{
   font-size:44px;
}

@media (min-width: 768px) 
{
   body
   {
       font-size: 17px; 
   }
   h1
   {
       font-size:24px;
   }
}

Sử dụng thứ nguyên theo % hoặc rem . Chỉ cần thay đổi kích thước phông chữ cơ bản, mọi thứ sẽ thay đổi. Không giống như trước đó, bạn chỉ có thể thay đổi phông chữ nội dung chứ không phải h1 mọi lúc hoặc để kích thước phông chữ cơ sở thành mặc định của thiết bị và đặt tất cả trong em.
- “Root Ems” (rem) : “rem” là một đơn vị có thể mở rộng. 1rem bằng với kích thước phông chữ của body / html, ví dụ: nếu kích thước phông chữ của tài liệu là 12pt thì 1em bằng 12pt. Root Ems có bản chất là có thể mở rộng, vì vậy 2em sẽ bằng 24pt, .5em sẽ bằng 6pt, v.v.
- Phần trăm (%) : Đơn vị phần trăm giống như đơn vị “em”, tiết kiệm cho một vài khác biệt cơ bản. Đầu tiên và quan trọng nhất, kích thước phông chữ hiện tại bằng 100% (tức là 12pt = 100%). Trong khi sử dụng đơn vị phần trăm, văn bản của bạn vẫn có thể mở rộng hoàn toàn cho các thiết bị di động và cho khả năng truy cập.

xem kyleschaeffer.com / ....

Question 5

Tôi đã phát triển một giải pháp JS tốt - phù hợp với HTML hoàn toàn đáp ứng (tức là HTML được xây dựng với phần trăm)

Tôi chỉ sử dụng "em" để xác định kích thước phông chữ.
Kích thước phông chữ html được đặt thành 10 pixel:
```
html {
  font-size: 100%;
  font-size: 62.5%;
}
```
Tôi gọi một chức năng thay đổi kích thước phông chữ trên tài liệu sẵn sàng:

// điều này yêu cầu JQuery

function doResize() {
    // FONT SIZE
    var ww = $('body').width();
    var maxW = [your design max-width here];
    ww = Math.min(ww, maxW);
    var fw = ww*(10/maxW);
    var fpc = fw*100/16;
    var fpc = Math.round(fpc*100)/100;
    $('html').css('font-size',fpc+'%');
}

Question 6

Bạn có thể thử công cụ này: http://fittextjs.com/

Tôi chưa sử dụng công cụ thứ hai này, nhưng nó có vẻ tương tự: https://github.com/zachleat/BigText

Question 7

Không chắc tại sao điều này lại phức tạp. Tôi sẽ làm javascript cơ bản này

<body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>

Trong đó 12 có nghĩa là 12px ở độ phân giải 1280. Bạn quyết định giá trị bạn muốn ở đây

Question 8

Điều này đã làm việc cho tôi:

body {

  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum 
viewport width]) / ([maximum viewport width] - [minimum viewport width])));

}

Giải thích chi tiết tại đây: https://css-tricks.com/books/volume-i/scale-typography-screen-size/

Question 9

Tôi đã tạo một biến thể của https://stackoverflow.com/a/17845473/189411

nơi bạn có thể đặt kích thước văn bản tối thiểu và tối đa liên quan đến kích thước tối thiểu và tối đa của hộp mà bạn muốn kích thước "kiểm tra". Ngoài ra, bạn có thể kiểm tra kích thước của phần tử dom khác với hộp mà bạn muốn áp dụng kích thước văn bản.

Bạn thay đổi kích thước văn bản từ 19px đến 25px trên phần tử # size-2, dựa trên chiều rộng 500px và 960px của phần tử # size-2

resizeTextInRange(500,960,19,25,'#size-2');

Bạn thay đổi kích thước văn bản từ 13px đến 20px trên phần tử # size-1, dựa trên chiều rộng 500px và 960px của phần tử body

resizeTextInRange(500,960,13,20,'#size-1','body');

mã hoàn chỉnh ở đó https://github.com/kiuz/sandbox-html-js-css/tree/gh-pages/text-resize-in-range-of-text-and-screen/src

function inRange (x,min,max) {
    return Math.min(Math.max(x, min), max);
}

function resizeTextInRange(minW,maxW,textMinS,textMaxS, elementApply, elementCheck=0) {

    if(elementCheck==0){elementCheck=elementApply;}

    var ww = $(elementCheck).width();
    var difW = maxW-minW;
    var difT = textMaxS- textMinS;
    var rapW = (ww-minW);
    var out=(difT/100)*(rapW/(difW/100))+textMinS;
    var normalizedOut = inRange(out, textMinS, textMaxS);
    $(elementApply).css('font-size',normalizedOut+'px');

    console.log(normalizedOut);

}

$(function () {
    resizeTextInRange(500,960,19,25,'#size-2');
    resizeTextInRange(500,960,13,20,'#size-1','body');
    $(window).resize(function () {
        resizeTextInRange(500,960,19,25,'#size-2');
        resizeTextInRange(500,960,13,20,'#size-1','body');
    });
});

Question 10

Không sử dụng truy vấn phương tiện là tốt vì nó cho phép mở rộng kích thước phông chữ dần dần.

Việc sử dụng vwcác đơn vị sẽ điều chỉnh kích thước phông chữ so với kích thước cổng xem.

Việc chuyển đổi trực tiếp vwcác đơn vị thành kích thước phông chữ sẽ làm cho việc chuyển đổi đơn vị trở nên khó khăn đối với cả độ phân giải di động và máy tính để bàn.

Tôi khuyên bạn nên thử một cái gì đó như:

body {
    font-size: calc(0.5em + 1vw);
}

Tín dụng: CSS In Depth

Question 11

<script>
function getFontsByScreenWidth(actuallFontSize, maxScreenWidth){
     return (actualFontSize / maxScreenWidth) * window.innerWidth;
}

// Example:
fontSize = 18;
maxScreenWidth = 1080;
fontSize = getFontsByScreenWidth(fontSize, maxScreenWidth)

</script>

Hy vọng điều này có thể giúp cho bạn. Tôi đang sử dụng công thức này cho trò chơi Giai đoạn của mình.