Tôi đang học CSS và đang đọc các câu hỏi về kích thước phông chữ Tương đối so với Tuyệt đối trên StackOverflow. Tôi bắt gặp hai chủ đề.Kích thước phông chữ tương đối phức tạp trên các phần tử con?
1. Trong một thread (CSS font size: relative vs. absolute values. Which to use?), một trong những câu trả lời thực sự là một câu hỏi chưa được trả lời: [QUOTE]
Câu hỏi, nhiều người ở đây nói rằng Pt chỉ dành cho in. Nhưng nó không phải là nó tốt đẹp để có một khả năng đơn giản để làm cho văn bản kích thước bạn muốn nhanh chóng mà không cần nhớ những gì DIV có những gì Em hoặc giá trị%. Ví dụ: khi bạn có:
<body>
<div id="box1">
test text sample1
<div id="box2">
test text sample2
<div id="box3">
test text sample3
<div id="box4">
test text sample4
</div>
</div>
</div>
</div>
Tôi biết đó là một cấu trúc kỳ lạ, nhưng giả sử bố cục cần cấu trúc như thế cho mục đích đồ họa và phân lớp hình ảnh CSS. Vì vậy, tôi muốn làm cho box1 font = 100%, box2 = 1.2em. box3 = .8em, và box4 = 1.6em
Bây giờ, vấn đề là Em từ hộp 1 cũng chuyển cho tất cả các con, sửa tôi nếu tôi sai, vậy có nghĩa là box2 không chính xác 1.2em, và vào thời điểm chúng tôi nhận được kích thước phông chữ của hộp 4, thật khó để nói nó là gì. Trong khi đó khi chúng ta sử dụng Pt hoặc Px nó vẫn là cách chúng ta muốn nó ở lại.
Tuy nhiên, kích thước Px, không linh hoạt và tôi thích làm cho phông chữ lớn hơn trong trình đơn của trình duyệt khi tôi ngồi cách xa màn hình. Hãy đối mặt với nó, nó là thuận tiện. Vì vậy, kích thước Px là ra ngoài. Vậy tại sao không sử dụng Pt? Mức độ khác biệt của trình duyệt là bao nhiêu?
2. chủ đề khác có cùng một câu hỏi (Compounded relative font-sizes: a clean way to adopt the font-size of the child, not the parent element) với những con số, tính toán - - explanative hơn, mà không có một câu trả lời thích hợp:
Ví dụ, nếu tôi có:
td { font-size: 1.3em }
h2 { font-size: 2em }
h3 { font-size: 1.6em }
p { font-size: 1.2 }
và tôi có tiêu đề/đoạn văn bên trong ô bảng của mình, tôi biết rằng tôi có thể tránh làm phức tạp kích thước phông chữ theo các cách sau:
td h2, td h3, td p { font-size: 1em }
điều này sẽ dẫn đến các tiêu đề/đoạn văn trong ô bảng của tôi có kích thước phông chữ là 1.3em (của td).
Nhưng những gì tôi đang tìm kiếm là một cách tốt đẹp, sạch sẽ cho mỗi phần tử con để có kích thước phông chữ gốc, không phải của bố mẹ.
Tôi thực sự muốn tránh cách làm như sau (và dĩ nhiên là tôi muốn tránh sử dụng px):
td h2 { font-size: 1.54em } // 1.3 x 1.54 ~ 2
td h3 { font-size: 1.23em } // 1.3 x 1.23 ~ 1.6
td p { font-size: 0.92em } // 1.3 x 0.92 ~ 1.2
Đối với bất cứ ai quen thuộc với LESS, Tôi đang sử dụng đó và nghĩ rằng tôi nên có thể sử dụng nó để thực hiện các phép tính cho tôi, ví dụ. sử dụng accessors:
td h2 { font-size: h2['font-size']/td['font-size'] }
này ít nhất sẽ sử dụng các giá trị ban đầu để thực hiện tính toán nhưng cảm thấy giống như vụng về như bên trên và bên cạnh đó, có vẻ như LESS không còn hỗ trợ accessors anyway.
Điều này có vẻ rất đơn giản trong khái niệm, tôi cảm thấy như câu trả lời đang nhìn chằm chằm vào mặt tôi, nhưng tôi đã đập đầu của tôi chống lại điều này một lúc và không thể tìm thấy câu trả lời ở bất cứ đâu.
Vui lòng trợ giúp! Tại thời điểm này nếu ai đó nói với tôi rằng nó không thể được thực hiện và đó là OK để đi trước và sử dụng các giá trị pixel, tôi sẽ khá vui vẻ tin rằng họ!
Nó có thể là rõ ràng bây giờ những gì câu hỏi của tôi là ... Có cách nào tốt hơn để sử dụng kích thước tương đối phông chữ (hoặc bất kỳ kích thước tương đối - như chiều rộng, chiều cao, vv - cho rằng vấn đề) mà không các phần tử con được thực hiện bởi phần tử cha?
Có sử dụng quá nhiều kích thước phông chữ tương đối trong CSS có nghĩa là tải trang chậm (ít nhất là so với sử dụng các giá trị tuyệt đối) khi họ yêu cầu xử lý nhiều hơn để được thực hiện? –
Nó về mặt kỹ thuật có thể tải chậm hơn, nhưng máy tính tính toán nó sẽ quá nhanh nó sẽ không có khả năng quan trọng trừ khi bạn đang làm nó theo thứ tự hàng ngàn lần. Vấn đề lớn nhất của bạn là khả năng bảo trì (theo dõi kích thước thực sự là gì) và b) thiết kế tổng thể (hầu hết các mẫu thiết kế có hiệu quả nhất khi chỉ có một vài khác biệt về kích thước hoặc màu sắc). Viết mã của bạn để sử dụng các phương pháp hay nhất về HTML có thể sẽ có tác động lớn hơn đến tốc độ tải so với sử dụng ems so với pixel. – Shauna