Làm cho truy vấn phương tiện CSS sử dụng kích thước của tài liệu html thay vì trình duyệt?

Question

Tôi đang cố gắng sử dụng truy vấn phương tiện để thay đổi chiều rộng của phần tử theo khối dựa trên chiều rộng của cửa sổ (điều này cho phép tôi tăng số lượng cột trên trang mà không có chiều rộng của cột thay đổi). Tôi muốn có thể làm điều này bằng cách sử dụng của em thay vì pixel để mọi thứ sẽ trông đúng nếu bạn thay đổi kích thước phông chữ của bạn. Tuy nhiên, nếu tôi sử dụng như sau:

html { 
    font-size: 12px; /* you could also use 75% if you want to be percent based.*/ 
} 

@media screen and (min-width: 42em) { 
    div#page { 
     width: 42em; 
    } 
} 

Các truy vấn phương tiện truyền thông sẽ kích hoạt khi chiều rộng tối thiểu của cửa sổ đạt 42 * 16px, mặc định kích thước font cho trình duyệt của tôi (Safari), trong khi chiều rộng của div # trang sẽ là 42 * 12px, kế thừa kích thước phông chữ từ phần tử html. Tôi thực sự muốn cho các truy vấn phương tiện truyền thông để kích hoạt dựa trên chiều rộng của văn bản tôi đang sử dụng, là có một cách để làm cho công việc đó?

Answer 1

Không, bạn không thể, bởi vì trong một truy vấn phương tiện truyền thông, “đơn vị tương đối trong các truy vấn phương tiện truyền thông đều dựa trên các giá trị ban đầu, có nghĩa là đơn vị không bao giờ dựa trên kết quả của việc kê khai. Ví dụ: trong HTML, đơn vị ‘em’ có liên quan đến giá trị ban đầu của ‘kích thước phông chữ’. ”(Thông số truy vấn phương tiện, khoản 6 Units). Giá trị ban đầu của font-size là medium, được ánh xạ tới kích thước thực theo cách phụ thuộc vào trình duyệt (độc lập với bất kỳ thứ gì bạn có thể đặt trong CSS).

Kết luận phụ thuộc vào cách bạn đặt kích thước phông chữ. Nếu bạn đang đặt kích thước phông chữ của phần tử gốc theo pixel, thì cũng hợp lý khi sử dụng pixel trong truy vấn phương tiện, vì việc sử dụng em sẽ không cung cấp bất kỳ sự linh hoạt nào. Nếu bạn đặt kích thước phông chữ của phần tử gốc thành phần trăm, bạn cần sử dụng em trong truy vấn phương tiện nhưng bạn chỉ cần tính đến em có nghĩa là kích thước phông chữ mặc định của trình duyệt ở đó và bạn cần chọn hệ số là em.

Answer 2

Từ W3C (http://www.w3.org/TR/CSS21/syndata.html)
Đơn vị 'em' bằng giá trị được tính của thuộc tính 'kích thước phông chữ' của phần tử trên nó được sử dụng. Ngoại lệ là khi 'em' xuất hiện trong giá trị của thuộc tính 'font-size', trong trường hợp này nó đề cập đến kích thước phông chữ của phần tử gốc.

html { font-size:1em; width:42em; } 
body { font-size:1.6em; } 

@media screen and (max-width:40em) { 
    div#page { font-size:0.875em; } /* 14px font */ 
} 

Lưu ý: 42 có thể không bao giờ chiếm 100% chiều rộng của cửa sổ trình duyệt. Nếu bạn thay đổi @media để hoạt động khác nhau cho các chiều rộng màn hình khác nhau (max-width:1200px), (max-width:1024px), bạn có thể sẽ nhận được nhiều hiệu ứng hơn mà tôi nghĩ bạn đang theo dõi.

Answer 3

Tôi vừa tìm kiếm cùng một thứ và AFAIK không có cách nào thay đổi kích thước phông chữ "gốc" của trình duyệt/thiết bị; nhưng điều này thực sự tốt nếu bạn nhìn vào nó theo một cách nào đó.

Truy vấn phương tiện và thẻ html --if được đặt trong đơn vị tương đối-- đang đề cập đến cùng một số cơ sở trên bất kỳ thiết bị hoặc trình duyệt cụ thể nào (trong trường hợp trình duyệt trên máy tính là 16px, nhưng có thể khác các thiết bị khác hoặc nếu người dùng thay đổi zoom của họ). Vì vậy, nếu bạn đặt kích thước văn bản html theo tỷ lệ phần trăm hoặc thước đo giá trị này (cho máy tính để bàn tương đương 12px, sử dụng 75% hoặc 0,75em), sau đó đặt truy vấn phương tiện của bạn dựa trên cách chia pixel chiều rộng bằng giá trị này (cho tương đương với máy tính để bàn 960px, sử dụng 60em), mọi thứ sẽ rơi vào vị trí trên mọi thiết bị ở mọi mức thu phóng.

cũng Xem này link