Sự khác nhau giữa% và vw trong css là gì?

Question

1vw = 1%, vì vậy nếu chúng có thể thay đổi 100% tại sao cả hai đều tồn tại? Tôi cảm thấy% phụ thuộc vào kích thước của thẻ wrapper nhưng vh luôn phụ thuộc vào kích thước cửa sổ không có vấn đề kích thước của thẻ wrapper. Cảm ơn,

Answer 1

Chúng không nhất thiết phải hoán đổi cho nhau.

Hành vi sẽ chủ yếu phụ thuộc vào vị trí của phần tử trong DOM, vì điều này sẽ xác định khối chứa của phần tử đó là gì. Nếu phần tử có chiều rộng là 100%, nó sẽ có chiều rộng là 100% của khối có chứa chiều rộng. Nếu phần tử có chiều rộng là 100vw, thì có chiều rộng là 100% của chế độ xem chiều rộng (chế độ xem có thể không phải là phần tử chứa phần tử, nhưng đơn vị phần trăm khung nhìn sẽ luôn có liên quan đến chế độ xem).

Một chặt chẽ tỷ lệ phần trăm dựa chiều rộng sẽ luôn luôn được so với chiều rộng của yếu tố khác, nhưng khi sử dụng độ dài viewport-phần trăm, chiều rộng của một nguyên tố thực sự có thể được liên quan đến chiều cao của khung nhìn. Ví dụ: nếu phần tử có chiều rộng là 100vh, nó sẽ có chiều rộng là 100% của chiều cao của chế độ xem. Điều này là không thể khi sử dụng độ rộng dựa trên tỷ lệ phần trăm nghiêm ngặt.

dài Viewport-tỷ lệ phần trăm được luôn luôn được liên quan đến initial containing block của họ, đó là chế độ xem:

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

Chiều dài viewport-tỷ lệ có liên quan đến kích thước của initial containing block. Khi chiều cao hoặc chiều rộng của khối chứa ban đầu được thay đổi, chúng được thu nhỏ cho phù hợp.

Trong khi các đơn vị dựa trên phần trăm sẽ được liên quan đến yếu tố họ mẹ (tức là khối chứa của họ), trong đó có thể xảy ra được các yếu tố body/html, trong trường hợp này họ sẽ tương tự như Viewport-tỷ lệ chiều dài .

4.3. Percentages: the ‘<percentage>’ type

giá trị phần trăm luôn tương ứng với giá trị khác, ví dụ chiều dài. Mỗi thuộc tính cho phép tỷ lệ phần trăm cũng xác định giá trị mà tỷ lệ phần trăm đề cập. Giá trị có thể là giá trị của thuộc tính khác cho cùng một phần tử, thuộc tính cho phần tử tổ tiên hoặc giá trị của ngữ cảnh định dạng (ví dụ: chiều rộng của khối chứa). Khi giá trị phần trăm được đặt cho thuộc tính của phần tử gốc và phần trăm được xác định là tham chiếu đến giá trị được thừa kế của một số thuộc tính, giá trị kết quả là phần trăm lần giá trị ban đầu của thuộc tính đó.