Đơn vị khung nhìn CSS: bắt đầu nhanh. Đơn vị CSS (px, %, em, vw, vh, vmin, vmax) và hàm calc

Một bài viết là không cần thiết.

1px (điểm ảnh)= 1/96 inch, nhưng không có trong CSS. 1 px trong CSS là một điểm trên màn hình của người dùng, đại lượng vật lýđiều này phụ thuộc vào độ phân giải của thiết bị và khoảng cách mà một người nhìn vào bề mặt của thiết bị ( điện thoại di động hoặc truyền hình). Bất kể đơn vị đo lường nào chúng tôi viết mã, nó sẽ được giảm xuống px.

1 em= giá trị cỡ chữ gốc. Xin lưu ý rằng trong đa giác bên dưới, cỡ chữ của khối màu vàng và màu nâu là khác nhau, nhưng cỡ chữ giống nhau.

16px * 1 = 16px // vàng 16px * 0,5 = 8px // xanh 8px * 2 = 16px // nâu

1 rem= giá trị cỡ chữ (phần tử gốc của tài liệu).

16px * 1 = 16px // vàng 16px * 0,5 = 8px // xanh 16px * 2 = 32px // nâu

1 phần trăm (1%)- giá trị liên quan đến giá trị thuộc tính của thẻ cha.

16px * 100% = 16px // vàng 16px * 50% = 8px // xanh 8px * 200% = 16px // nâu

Khi chiều rộng của phần tử gốc giảm, chiều rộng của phần tử cũng giảm, nhưng phông chữ của nó thì không.

1vw= 1% chiều rộng cửa sổ. Khi giảm chiều rộng của cửa sổ thì chiều rộng, chiều cao và phông chữ của phần tử cũng giảm. Phông chữ sẽ không được thu nhỏ khi nhấn Ctrl + hoặc Ctrl - .

1vh= 1% chiều cao cửa sổ. Khi chiều cao của cửa sổ giảm thì chiều rộng, chiều cao và phông chữ của phần tử cũng giảm. Phông chữ sẽ không được thu nhỏ khi nhấn Ctrl + hoặc Ctrl - .

1v phút= 1vw hoặc 1vh. Cái nào nhỏ hơn sẽ được chọn.

1vmax= 1vw hoặc 1vh. Cái nào lớn hơn sẽ được chọn.

cỡ chữ: 16px 100% 1em 1vw 1vh 1vmin 1vmax 1rem ;

cỡ chữ: 8px 50% .5em .5vw .5vh .5vmin .5vmax .5rem ;

cỡ chữ: 32px 200% 2em 2vw 2vh 2vmin 2vmax 2rem ;

hàm calc()

Bạn đã bao giờ muốn trừ pixel hoặc ems khỏi tỷ lệ phần trăm chưa? Ví dụ, để. Bây giờ điều đó là có thể. Hàm calc() cho phép bạn thực hiện các biểu thức toán học

Phép cộng (ký tự cách nhau bằng dấu cách ở cả hai bên) - phép trừ (ký tự cách nhau bằng dấu cách ở cả hai bên) * nhân / chia

Đây là một ví dụ tuyệt vời khác.

• 1
• 2
• 3
• 4

: vw, vh, và vmin. Gần đây, phiên bản dev của Chrome (số 20) cũng hỗ trợ chúng và điều này mang lại một số hy vọng rằng các nhà phát triển trình duyệt khác sẽ làm theo ví dụ này. Trên thực tế, điều này sẽ hữu ích vì nó rất tiện lợi và thiết thực, và tôi sẽ cố gắng giải thích cho bạn lý do tại sao lại như vậy.

Tại sao điều này lại tuyệt vời?

Nhiều lý do. Dưới đây là hai trong số họ:

1. Có một thứ gọi là độ dài của một dòng văn bản mà bạn có thể đọc thoải mái. Tôi không muốn bắt đầu một kỳ nghỉ lễ, nhưng giả sử nó có 80 ký tự. Vì vậy, các đơn vị đo lường này cho phép bạn duy trì giá trị này trên mọi kích thước màn hình
2. Họ cũng có thể điều chỉnh mối quan hệ giữa tiêu đề và nội dung, như trong một trong những bài đăng của Trent Walton.

Làm thế nào nó hoạt động?

Đơn vị của mỗi giá trị trong ba giá trị này là 1% kích thước màn hình. Ví dụ: nếu kích thước màn hình có chiều rộng 40 cm thì 1vw bằng 0,4 cm.

1vw= 1% chiều rộng cửa sổ
1vh= 1% chiều cao cửa sổ
1v phút= 1vw hoặc 1vh, tùy theo giá trị nào nhỏ hơn

Cách sử dụng

Ồ, nó rất đơn giản:

H1 (cỡ chữ: 5.9vw; ) h2 (cỡ chữ: 3.0vh; ) p (cỡ chữ: 2vmin; )

Hỗ trợ trình duyệt

Chrome 20+ Và TỨC LÀ 10+
Tôi đã kiểm tra Opera Next (12), Safari 5.2 và Firefox Beta (13) - nhưng không có kết quả.

Thử nghiệm

Một đoạn video ngắn hướng dẫn sử dụng vw:

Bạn có thể tự mình thử (đảm bảo trình duyệt của bạn hỗ trợ các đơn vị đo lường này)

Lỗi

Có hỗ trợ trong Chrome 20, nhưng hơi lệch một chút. Khi thay đổi kích thước cửa sổ trình duyệt, phông chữ không điều chỉnh cho vừa với kích thước cửa sổ mới. Thông số kỹ thuật cho biết:

Nếu chiều cao hoặc chiều rộng của cửa sổ thay đổi, chúng sẽ được chia tỷ lệ tương ứng

Tôi đã gửi yêu cầu tới trình theo dõi lỗi. Có lẽ đây không phải là vấn đề lớn, phông chữ vẫn thay đổi khi tải trang “sạch”. Những điều nhỏ nhặt như vậy chỉ thú vị đối với chúng tôi, những người đam mê thiết kế, những người xử lý những điều đó một cách cẩn thận, nhưng vẫn vậy.

Để khắc phục sự cố này (cho phép thay đổi kích thước mà không cần tải lại trang), bạn cần phải vẽ lại phần tử. tôi đã sử dụng jQuery và vừa thử nghiệm các giá trị chỉ số z của từng phần tử gây ra việc vẽ lại.

CauseRepaintsOn = $("h1, h2, h3, p"); $(window).resize(function() ( CauseRepaintsOn.css("z-index", 1); ));

Không chỉ cỡ chữ

Nhân tiện, đây chỉ là một số ít. Giống như em , px , sao cũng được. Bạn có thể sử dụng chúng ở mọi nơi, không chỉ bị giới hạn bởi kích thước phông chữ.

Sử dụng nó!

Cách sử dụng gốc

Đừng quên để lại cuộc gọi lại cho những trình duyệt chưa hỗ trợ các đơn vị này:

H1 (cỡ chữ: 36px; cỡ chữ: 5.4vw; )

Kiểm tra hỗ trợ

Modernizr chưa có bài kiểm tra nào cho việc kiểm tra này, nhưng bạn có thể tự kiểm tra bằng cách sử dụng kịch bản nhỏ trong JS.

Var testEl = $("#vw-test"); var viewport = $(window); testEl.css(( chiều rộng: "100vw" )); if (testEl.width() == viewport.width()) ( $("html").addClass("vw-support"); ) else ( $("html").append("vw-unsupported") ; );

Bắt chước chức năng với FitText.js

Ý tưởng này là nó liên quan đến chiều rộng tổng thể của tiêu đề với chiều rộng phần tử cha, đó là những gì FitText.js thực hiện. Đúng vậy, anh ấy thực hiện điều này thông qua Javascript, toán học, thẻ span và nhiều thứ khác. Về lý thuyết, bạn có thể chạy kiểm tra và sử dụng Modernizr.load để tải FitText.js nếu không tìm thấy hỗ trợ.

Các đơn vị Kích thước CSSđóng một vai trò quan trọng trong việc tạo trang web và thiết lập kích thước của các thành phần khác nhau. Giá trị CSS có thể được biểu thị dưới dạng tích cực hoặc số âm, mặc dù một số thuộc tính chỉ chấp nhận số dương. Giá trị số kèm theo một chữ viết tắt gồm hai chữ cái đại diện cho đơn vị chiều dài thực tế. Ví dụ: cm (centimet), px (pixel) hoặc em CSS. Ngoại lệ cho quy tắc này là giá trị 0 (không), không yêu cầu đơn vị đo lường.

Đơn vị CSS có hai loại: tuyệt đối và tương đối.

Đơn vị độ dài tuyệt đối trong CSS

Các đơn vị CSS tuyệt đối không phù hợp với thiết kế web. Chúng đại diện cho sự thể hiện kỹ thuật số của kết quả đo trong thế giới vật lý và độc lập với kích thước và độ phân giải màn hình. Độ dài tuyệt đối có cùng giá trị có thể khác nhau bởi màn hình khác nhau. Điều này là do sự khác biệt về độ nhạy màn hình (số chấm trên mỗi inch).

Màn hình độ phân giải cao có độ phân giải cao hơn màn hình có độ phân giải thấp hơn, khiến hình ảnh và văn bản trông nhỏ hơn. Đơn vị tuyệt đối được sử dụng để xác định kiểu in, trong đó các phép đo xảy ra theo inch, điểm và pica.

Đơn vị tuyệt đối của độ dài:

• cm (cm);
• mm (milimét);
• theo số inch);
• pc(đỉnh);
• pt(điểm);
• px (pixel).

Hầu hết các đơn vị độ dài tuyệt đối đều vô dụng trên Internet. Ngoại lệ duy nhất là px. Pixel là đơn vị tương đối liên quan đến độ phân giải màn hình. Đối với máy in và màn hình có rất độ phân giải cao một pixel trong CSS bằng nhiều pixel trên màn hình, vì vậy số px trên mỗi inch là khoảng 96. Pixel là đơn vị đo lường nhỏ nhất và thường được sử dụng làm đơn vị tham chiếu cho các pixel khác.

Đơn vị độ dài tương đối trong CSS

Đơn vị độ dài tương đối trong CSS không có giá trị cố định. Ý nghĩa của chúng phụ thuộc vào người khác đặt giá trị hoặc các chức năng. Chúng phổ biến hơn trong thiết kế web vì chúng giúp xác định kích thước của một phần tử dễ dàng hơn. Với sự trợ giúp của họ, bạn có thể đặt chiều rộng, chiều cao, kích thước phông chữ, v.v. so với các thông số cơ bản khác.

Đơn vị tương đối tùy thuộc vào phông chữ

Các đơn vị tương đối phụ thuộc vào phông chữ được tham chiếu trước đặt kích thước giá trị thuộc tính phông chữ hoặc họ phông chữ:

• ex(chiều cao ký tự x);
• ch( độ rộng ký tự bằng 0 (0));
• đơn vị em trong CSS (chiều cao phông chữ của phần tử hiện tại);
• rem ( kích thước phông chữ phần tử gốc).

bán tại

Định nghĩa là " chiều cao ký tự x của phông chữ hiện tại HOẶC nửa 1 em" Tức là chiều cao chữ cái thường x phông chữ được cài đặt. Khi bạn thay đổi giá trị của thuộc tính họ phông chữ, đơn vị cũ sẽ thay đổi.

ch

Bằng độ rộng của ký tự 0 . Đơn vị đo này cũng thay đổi khi giá trị của thuộc tính font-family thay đổi.

em

Đơn vị em CSS có giá trị bằng kích thước phông chữ của phần tử nội dung hoặc phần tử gốc. Ví dụ: nếu kích thước phông chữ của phần tử cha là 30px thì giá trị 1em sẽ được tính là 30px (30 x 1) cho tất cả các phần tử con. Số không nhất thiết phải là số nguyên. Nếu trong ví dụ chúng ta thay thế 1em bằng 0,5 thì giá trị sẽ là 15px (30 x 0,5).

Đơn vị em nhận giá trị của thẻ cha. Điều này có thể dẫn đến kết quả không mong muốn khi sử dụng các phần tử lồng nhau.

Giả sử chúng ta có ba phần tử lồng nhau. Phần tử đầu tiên (root) có kích thước phông chữ là 30px và hai phần tử lồng nhau có kích thước phông chữ là 2em. Phần tử được lồng trong thư mục gốc sẽ có kích thước phông chữ được tính là 60px (30 x 2). Và phần tử được lồng bên trong nó sẽ có kích thước phông chữ được tính là 120px (60 x 2).

rem

rem tương tự như CSS em, nhưng giá trị của nó luôn bằng với kích thước phông chữ của phần tử gốc. Đơn vị rem rất hữu ích khi phát triển các trang web phản hồi vì nó cho phép bạn mở rộng toàn bộ trang bằng cách thay đổi kích thước phông chữ trong thành phần HTML.

Đơn vị độ dài phần trăm dựa trên kích thước khung nhìn

Khu vực xem dựa trên chiều rộng và chiều cao của khung nhìn và bao gồm:

• vh( chiều cao khung nhìn);
• vw( chiều rộng khung nhìn);
• vmin( nhỏ nhất của (vw, vh));
• vmax ( lớn nhất của (vw, vh)).

vw

Đây là chiều rộng của khung nhìn. 1vw bằng 1/100 chiều rộng khung nhìn. Hơi giống tỷ lệ phần trăm, ngoại trừ giá trị vẫn giữ nguyên cho tất cả các phần tử bất kể độ rộng của các phần tử cha của chúng. Ví dụ: nếu chiều rộng cửa sổ là 1000px thì 1vw sẽ bằng 10px.

vh

Tương tự như vw ( chiều rộng khung nhìn), chỉ có đơn vị đo này phụ thuộc vào chiều cao của vùng quan sát. 1vh bằng 1/100 chiều cao xem. Ví dụ: nếu chiều cao cửa sổ trình duyệt là 900px thì 1vh sẽ là 9px.

vmin

Vmin bằng 1/100 của giá trị tối thiểu giữa chiều cao và chiều rộng của khung nhìn. Nói cách khác, 1/100 cạnh có độ dài ngắn nhất. Ví dụ: nếu kích thước cửa sổ 1200 x 800 pixel, thì giá trị vmin sẽ là 8px .

vmax

vmax bằng 1/100 giá trị tối đa giữa chiều cao và chiều rộng của khung nhìn. Nói cách khác là 1/100 cạnh có chiều dài dài nhất. Ví dụ: nếu kích thước là 1200 x 800 pixel, thì vmax là 12px .

Quan tâm %

Khoảng cách được chỉ định dưới dạng phần trăm phụ thuộc vào độ dài của phần tử gốc. Ví dụ: nếu phần tử cha rộng 1000px và phần tử con của nó bằng 50% giá trị đó thì chiều rộng phần tử con sẽ là 500px.

HỖ TRỢ TRÌNH DUYỆT

em CSS, ex, px, cm, mm, in, pt và pc

được hỗ trợ trong tất cả các trình duyệt, bao gồm cả các phiên bản IE cũ hơn.

CSS sử dụng các đơn vị tuyệt đối và tương đối để định kích thước các phần tử khác nhau. Đơn vị tuyệt đối độc lập với thiết bị đầu ra, nhưng đơn vị tương đối xác định kích thước của một phần tử so với giá trị của kích thước khác.

Đơn vị tương đối

Các đơn vị tương đối thường được sử dụng để làm việc với văn bản. Trong bảng 1 liệt kê các đơn vị tương đối chính.

Đơn vị em là giá trị thay đổi, tùy thuộc vào kích thước phông chữ của phần tử hiện tại (kích thước được đặt thông qua thuộc tính kiểu phông chữ). Mỗi trình duyệt có một kích thước văn bản tích hợp được sử dụng khi kích thước này không được chỉ định rõ ràng. Do đó, ban đầu 1em bằng cỡ chữ mặc định của trình duyệt hoặc cỡ chữ của phần tử gốc. Ký hiệu phần trăm giống hệt với em, trong đó giá trị của 1em và 100% bằng nhau.

Đơn vị cũ được định nghĩa là chiều cao của ký tự "x" viết thường. ex phải tuân theo các quy tắc tương tự như em, cụ thể là nó bị ràng buộc với kích thước phông chữ mặc định của trình duyệt hoặc kích thước phông chữ của phần tử cha của nó.

Đơn vị ch bằng độ rộng của ký tự "0" đối với phần tử hiện tại và giống như em, phụ thuộc vào kích thước phông chữ.

Sự khác biệt giữa em và rem như sau. em phụ thuộc vào kích thước phông chữ của phần tử gốc và thay đổi theo nó, còn rem được gắn với phần tử gốc, tức là kích thước phông chữ được chỉ định cho phần tử html.

Ngoài ra còn có một nhóm đơn vị tương đối gắn liền với kích thước của khung nhìn trình duyệt. Trong bảng 2 hiển thị danh sách chúng kèm theo mô tả.

Đơn vị tuyệt đối

Đơn vị tuyệt đối là kích thước vật lý- inch, cm, milimét, điểm, picas và pixel. Đối với các thiết bị có dpi thấp (số pixel trên inch xác định mật độ pixel), liên kết là trên mỗi pixel. Trong trường hợp này, một inch bằng 96 pixel. Rõ ràng, inch thật sẽ không khớp với inch trên thiết bị như vậy. Trên các thiết bị có độ phân giải cao, inch thực bằng inch trên màn hình nên kích thước pixel được tính là 1/96 inch. Trong bảng 3 liệt kê các đơn vị tuyệt đối cơ bản.

Ví dụ

tiêu đề 30px

Cỡ chữ 1,5 em

Tiêu đề 24 điểm

Dịch văn bản sang phải 30 mm

Ghi chú

Khi cài đặt kích thước, hãy đảm bảo chỉ định đơn vị đo, ví dụ: chiều rộng: 30px. Nếu không, trình duyệt sẽ không thể hiển thị kết quả mong muốn vì nó không hiểu kích thước bạn yêu cầu. Đơn vị không được thêm vào chỉ khi giá trị 0(lề: 0).

Internet Explorer hỗ trợ đơn vị vm thay vì vmin.

Sự chỉ rõ

Mỗi thông số kỹ thuật đều trải qua nhiều giai đoạn phê duyệt.

• Khuyến nghị - Thông số kỹ thuật đã được W3C phê duyệt và được khuyến nghị làm tiêu chuẩn.
• Đề xuất ứng viên ( Khuyến nghị có thể ) - nhóm chịu trách nhiệm về tiêu chuẩn hài lòng vì đã đáp ứng được các mục tiêu của mình nhưng cần có sự trợ giúp từ cộng đồng phát triển để thực hiện tiêu chuẩn.
• Khuyến nghị đề xuất Khuyến nghị được đề xuất) - ở giai đoạn này, tài liệu được gửi tới Hội đồng tư vấn của W3C để phê duyệt lần cuối.
• Bản dự thảo đang hoạt động - Một phiên bản hoàn thiện hơn của bản dự thảo đã được thảo luận và sửa đổi để cộng đồng xem xét.
• Bản thảo của người biên tập ( bản thảo biên tập) - phiên bản dự thảo của tiêu chuẩn sau khi các biên tập viên dự án thực hiện các thay đổi.
• Bản nháp ( Thông số kỹ thuật dự thảo) - phiên bản dự thảo đầu tiên của tiêu chuẩn.

Tôi đã đề cập đến các đơn vị đo lường mới (tương đối). Các đơn vị này là vw, vh, vmin và vmax và dựa trên kích thước khung nhìn của trình duyệt. Kích thước thực tế của chúng thay đổi khi khung nhìn của trình duyệt thay đổi, khiến các đơn vị này trở nên lý tưởng cho thiết kế thích ứng. Mặc dù trong bài viết trước tôi đã phản đối việc sử dụng các đơn vị này để chỉ định kích thước phông chữ, nhưng chúng có thể rất hữu ích khi làm việc với các thành phần bố cục.

Đơn vị khung nhìn

Đơn vị khung nhìn là đơn vị tương đối, nghĩa là chúng không thể đo lường một cách khách quan. Kích thước của chúng được xác định bởi kích thước của khung nhìn trình duyệt. Có bốn đơn vị liên quan đến khung nhìn.

Tôi sẽ tập trung vào hai cái đầu tiên vì chúng được sử dụng phổ biến nhất. Trong nhiều trường hợp đơn vị khung nhìn(vh và vw) giao nhau với tỷ lệ phần trăm về khả năng. Tuy nhiên, mỗi người trong số họ đều có điểm mạnh và điểm yếu riêng.

Tóm lại, nó trông như thế này:

Khi xử lý chiều rộng, % sẽ tốt hơn và khi xử lý chiều cao, vh sẽ tốt hơn.

Các phần tử có chiều rộng toàn trang: % > vw

Như tôi đã nói, vw xác định kích thước của phần tử dựa trên chiều rộng của khung nhìn. Tuy nhiên, trình duyệt tính toán kích thước dựa trên khoảng trống cho thanh cuộn.

Nếu chiều rộng trang vượt quá chiều rộng khung nhìn, thanh cuộn sẽ xuất hiện. Tuy nhiên, trên thực tế chiều rộng của khung nhìn lớn hơn chiều rộng của phần tử html

Chế độ xem> html> nội dung

Vì vậy, nếu bạn đặt chiều rộng của phần tử thành 100vw, phần tử sẽ mở rộng ra ngoài html và nội dung. V. trong ví dụ này Tôi đã tạo một đường viền màu đỏ xung quanh phần tử html và tô màu các phần bằng các màu khác nhau.

Do sắc thái này, tốt hơn là tạo các phần tử trên toàn bộ chiều rộng của trang bằng cách sử dụng tỷ lệ phần trăm, thay vì dựa vào chiều rộng của khung nhìn.

Phần tử chiều cao toàn trang: vh > %

Khi tạo các phần tử cần có cùng chiều cao với trang, sẽ tốt hơn nhiều khi sử dụng vh thay vì tỷ lệ phần trăm. Vì kích thước phần trăm của một phần tử có liên quan đến phần tử cha của nó nên chúng ta có thể lấy được chiều cao của phần tử chiều cao bằng nhau chỉ màn hình nếu phần tử cha của nó cũng chiếm toàn bộ chiều cao của màn hình. Điều này có nghĩa là chúng ta phải định vị phần tử là cố định để thực hiện phần tử html cha mẹ hoặc sử dụng một số loại hack.

Sử dụng vh để đạt được hiệu ứng này khá đơn giản:

Ví dụ ( chiều cao: 100vh; )

Bất kể phần tử .example được lồng như thế nào, kích thước của nó có thể được đặt tương ứng với kích thước của khung nhìn. Vấn đề cuộn sẽ không làm phiền chúng tôi vì hầu hết các trang web đều không có thanh cuộn ngang

Dưới đây là một số ví dụ về cách sử dụng đơn vị vh.

Hình nền toàn màn hình

Một cách sử dụng điển hình của đơn vị vh là tạo ra hình nền, trải dài toàn bộ chiều cao và chiều rộng của màn hình, bất kể kích thước thiết bị. Điều này khá dễ thực hiện.

Bg (vị trí: tương đối; nền: url("bg.jpg") trung tâm/bìa; chiều rộng: 100%; chiều cao: 100vh; )

Theo cách tương tự, chúng ta có thể tạo hiệu ứng “trang” bằng cách cung cấp cho mỗi phần kích thước của khung nhìn.

Phần ( chiều rộng: 100%; chiều cao: 100vh; )

Chúng ta có thể sử dụng JavaScript để tạo ảo giác về việc lật trang.

$("nav").on("click", function() ( if ($(this).hasClass("down")) ( var movePos = $(window).scrollTop() + $(window).height (); ) if ($(this).hasClass("up")) ( var movePos = $(window).scrollTop() - $(window).height(); ) $("html, body"). animate((scrollTop: movePos ), 1000); ))

Hình ảnh gấp

Vh cũng có thể được sử dụng để kiểm soát kích thước của hình ảnh trong một trang. Ví dụ, trong khuôn khổ một bài viết. Chúng tôi muốn đảm bảo rằng mọi hình ảnh sẽ được hiển thị toàn bộ bất kể kích thước màn hình.

Chúng tôi sẽ cần đoạn mã sau

Img ( width: auto; /* Chiều rộng tự động tỷ lệ thuận với chiều cao */ max-width: 100%; /* Không chiều rộng hơn phần tử cha */ chiều cao tối đa: 90vh; /* Không vượt quá chiều cao của khung nhìn */ lề: 2rem auto; )

Hỗ trợ trình duyệt

Vì các thiết bị này tương đối mới nên vẫn có vấn đề với một số trình duyệt nhất định.

Đây là cách giải quyết chúng.