Tôi hiện đang làm việc trên các kích thước phông chữ đáp ứng. Tôi biết rất rõ ý nghĩa của các đơn vị như vh, vw, vmin, v.v.

Nhưng tôi không thể đạt được bất cứ điều gì thuyết phục với họ. Chúng có thể lớn hơn trên màn hình lớn hoặc nhỏ hơn trên màn hình nhỏ. ngược lại.

Có quy tắc chung nào áp dụng cho giá trị nào không?

Ví dụ: h1 phải là 2vw, h2 phải là 1,5vw, p phải là 1vw, v.v...

Tôi nên sử dụng vw hay vh, tại sao?

câu trả lời hay nhất

Hackape nhận xét đúng, đây không phải là vấn đề về mã. Nhưng để trả lời câu hỏi thực tế "giá trị nào phù hợp" theo nghĩa mã, câu trả lời là tất cả những điều này.

Bạn có thể sử dụng vw Làm cho phông chữ của bạn tăng/thu nhỏ theo chiều rộng của khung nhìn. Ngoài ra, bạn có thể sử dụng vh để tăng/thu nhỏ dựa trên chiều cao.

Đối với quan điểm của bạn về việc quá lớn hoặc quá nhỏ, bạn có ít nhất hai lựa chọn.

Yêu cầu truyền thông

Sử dụng truy vấn phương tiện, bạn có thể kiểm soát kích thước phông chữ cho các kích thước cụ thể, giống như bạn có thể kiểm soát bất kỳ phần nào khác của trang web của mình trong thiết kế đáp ứng.

P {
  cỡ chữ: 2vw;
}

@media (chiều rộng tối thiểu: 600px) {
  P {
    cỡ chữ: 1vw;
  }
}

Đừng sử dụng ví dụ này làm lời khuyên thiết kế, nhưng bạn có thể thấy cách bạn có thể dễ dàng kiểm soát các giá trị này một cách thích hợp dựa trên lựa chọn của mình.

Khóa CSS

Một giải pháp thay thế tốt là công nghệ có tên CSS Locks. Đây thực sự không phải là một phần của CSS mà là một công thức từ CSS Calc, được biết là thực hiện khá tốt việc đưa ra kích thước phông chữ tối thiểu và tối đa.

Có một số bài viết hay về khóa CSS, một trong số đó là Bài toán về khóa CSS của Florens Verschelde .

Đây là từ Kiểu chữ mượt mà của CSS-Tricks Ví dụ:

P {
  cỡ chữ: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Như bạn có thể thấy, không có truy vấn phương tiện nào được sử dụng. Nếu bạn muốn sử dụng vw hoặc vh Điều đó cũng được.

Về css - responsive font size: Giá trị nào phù hợp?, chúng tôi tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/55805359/