Đơn vị khung nhìn so với tỷ lệ phần trăm. Hướng dẫn nhanh về đơn vị CSS

Một

CSS bên dưới sẽ kéo dài phần bên dưới hình nền chiều rộng đầy đủ:

Toàn màn hình ( chiều rộng: 100%; chiều cao: 100vh; phần đệm: 40vh; ) .a ( nền: url("path/to/image.jpg") trung tâm/bìa; )

Tiêu đề lý tưởng

Có thể bạn đã từng nghe hoặc thậm chí đã sử dụng plugin jQuery FitText. Sử dụng plugin này, bạn có thể chia tỷ lệ các tiêu đề để chúng chiếm toàn bộ chiều rộng phần tử cha. Như tôi đã nói trước đó, giá trị của đơn vị khung nhìn phụ thuộc trực tiếp vào kích thước của khung nhìn. Nghĩa là, nếu bạn chỉ định kích thước phông chữ của tiêu đề trong đơn vị khung nhìn thì chúng sẽ vừa với từng màn hình một cách lý tưởng. Nếu chiều rộng khung nhìn thay đổi, trình duyệt sẽ tự động thay đổi tiêu đề. Bạn chỉ cần xác định đúng nghĩa gốc cho kích thước phông chữ.

vấn đề chính với đơn vị kích thước phông chữ và khung nhìn là kích thước văn bản sẽ thay đổi rất nhiều tùy thuộc vào khung nhìn. Ví dụ: kích thước phông chữ 8vw sẽ tạo tiêu đề 96px cho chiều rộng khung nhìn là 1200px, 33px cho chiều rộng khung nhìn là 400px và 154px cho chiều rộng khung nhìn là 1920px. Phông chữ có thể quá lớn hoặc quá nhỏ để dễ đọc. Đọc thêm về cài đặt đúng kích thước văn bản sử dụng đơn vị đo lường và hàm tính toán() có thể được tìm thấy trong một bài viết tuyệt vời về kiểu chữ trong các đơn vị khung nhìn.

Dễ dàng định tâm các phần tử

Đơn vị khung nhìn có thể rất hữu ích khi bạn cần đặt chính xác một phần tử vào giữa màn hình của người dùng. Nếu đã biết chiều cao của phần tử thì bạn chỉ cần đặt giá trị trên và dưới thuộc tính lề trong [(100 - chiều cao)/2]vh.

Những gì cần nhớ

Nếu bạn quyết định sử dụng chế độ xem đơn vị trong dự án của mình, bạn cần lưu ý một số điều.

Khi làm việc với CCS, bạn rất dễ bị mắc kẹt ở một số điểm, bởi vì đôi khi ngay cả khi làm việc bằng phương pháp quen thuộc, vẫn có những vấn đề mới xuất hiện.

Khi Internet phát triển, nhu cầu về các giải pháp mới cũng tăng theo. Và vì bạn và tôi đều là nhà thiết kế web và nhà phát triển front-end nên chúng ta không có lựa chọn nào khác ngoài việc có thể làm việc với nhiều lựa chọn khác nhau và có thể hoạt động tốt.

Điều này có nghĩa là chúng ta cần có khả năng làm việc tốt ngay cả với những công cụ cụ thể thường rất hiếm khi được sử dụng, nhưng có những tình huống cần đến chúng.

Hôm nay chúng tôi muốn kể cho bạn nghe về một số Công cụ CSS. Mỗi công cụ này giống như một đơn vị đo lường, chẳng hạn như pixel hoặc ems, nhưng rất có thể bạn chưa biết về chúng.

Hãy bắt đầu với thứ gì đó trông giống thứ gì đó mà bạn có thể đã quen thuộc. Đơn vị em được định nghĩa là cỡ chữ hiện tại. Vì vậy, ví dụ: nếu bạn đặt kích thước phông chữ trên phần tử nội dung, thì giá trị em của bất kỳ phần tử thấp hơn nào trong phần nội dung sẽ bằng kích thước phông chữ đó.

Ở đây chúng tôi đã viết rằng kích thước phông chữ của div sẽ là 1,2em. Kích thước này lớn hơn 1,2 lần so với kích thước phông chữ mà nó kế thừa từ đó là 14px. Vậy kết quả là 16,8px.

Tuy nhiên, điều gì sẽ xảy ra nếu bạn xếp chồng các kích thước phông chữ do em xác định vào nhau? Trong đoạn tiếp theo, chúng ta áp dụng CCS tương tự như trên. Mỗi div kế thừa kích thước phông chữ từ cha mẹ của nó, mang lại cho chúng ta kích thước phông chữ lớn dần.

Mặc dù điều này có thể phù hợp trong một số trường hợp nhưng thông thường chúng tôi chỉ muốn dựa vào một số liệu duy nhất để đo lường. Trong trường hợp này chúng ta nên sử dụng rem. Chữ “r” trong rem là viết tắt của “gốc”; nó bằng cỡ chữ được đặt trong phần tử gốc; trong hầu hết các trường hợp nó là một phần tử HTML.

Html (cỡ chữ: 14px; ) div (cỡ chữ: 1.2rem; )

Trong cả ba div từ ví dụ trước, phông chữ có thể đạt tới 16,8px.

5 điểm, Lưới

Rem không chỉ hữu ích cho việc hiệu chỉnh phông chữ. Ví dụ: chúng ta có thể dựa trên toàn bộ hệ thống lưới hoặc thư viện giao diện người dùng dựa trên việc sử dụng kích thước Phông chữ HTML root rem và sử dụng phép tính của chúng ở những nơi nhất định. Điều này sẽ giúp chúng tôi hiệu chỉnh và tính toán phông chữ dễ dự đoán hơn.

Vùng chứa (chiều rộng: 70rem; // 70 * 14px = 980px )

Ý tưởng đằng sau ý tưởng này là cho phép giao diện của chúng tôi tương xứng với kích thước của nội dung. Mặc dù không nhất thiết trong mọi trường hợp nó đều có ý nghĩa giống nhau.

vh và vw

Kỹ thuật thiết kế web đáp ứng phụ thuộc rất nhiều vào quy tắc phần trăm. Tuy nhiên Phần trăm CSS- không phải lúc nào cũng vậy Quyết định tốt nhất cho mọi vấn đề. Chiều rộng CSS có liên quan đến phần tử gần nhất có chứa phần tử gốc. Điều gì sẽ xảy ra nếu chúng ta muốn sử dụng chiều rộng hoặc chiều cao của khung nhìn thay vì chiều rộng phần tử gốc? Đây chính xác là những gì các đơn vị vh và vw giúp thực hiện.

Phần tử vh có chiều cao bằng 1/100 của khung nhìn. Ví dụ: nếu chiều cao của trình duyệt là 900px thì 1vh có thể cao tới 9px. Ngoài ra nếu chiều rộng khung nhìn là 750px thì 1vw có thể đạt tới 7,5px.

Có vẻ như quy tắc này có thể được sử dụng vô tận. Ví dụ, một cách rất đơn giản để đạt được bằng cách sử dụng một Chuỗi CSS các slide có chiều cao đầy đủ hoặc xấp xỉ chiều cao đầy đủ có thể là:

Trượt (chiều cao: 100vh; )

Giả sử bạn muốn tạo tiêu đề lấp đầy toàn bộ chiều rộng của màn hình. Để làm điều này, bạn cần đặt cỡ chữ thành vw. Kích thước này sẽ tương đương với chiều rộng của trình duyệt.

vmin và vmax

Trong khi vh và vm luôn liên quan đến chiều cao và chiều rộng của khung nhìn thì vmin và vmax cũng liên quan đến mức tối đa và tối thiểu của chiều cao và chiều rộng đó, tùy thuộc vào cái nào nhỏ hơn và cái nào lớn hơn. Ví dụ: nếu trình duyệt có cài đặt rộng 1100px và cao 700px thì 1vmin sẽ là 7px và 1vmax sẽ là 11px. Tuy nhiên, nếu chiều rộng được đặt thành 800px và chiều cao thành 1080px thì vmin sẽ là 8px trong khi vmax sẽ được đặt thành 10,8px.

Trong trường hợp nào bạn có thể sử dụng các giá trị này?

Hãy tưởng tượng rằng bạn muốn một phần tử luôn hiển thị trên màn hình. Sử dụng chiều cao và chiều rộng, đặt theo giá trị vmin dưới 100 sẽ cho phép bạn đạt được điều này. Ví dụ: một phần tử hình vuông chạm vào ít nhất hai phần của màn hình có thể được xác định như sau:

Hộp ( chiều cao: 100vmin; chiều rộng: 100vmin; )

Nếu bạn muốn một hình vuông bao phủ toàn bộ khu vực hiển thị của khung nhìn, hãy sử dụng các quy tắc tương tự, ngoại trừ vmax.

Hộp ( chiều cao: 100vmax; chiều rộng: 100vmax; )

Sự kết hợp của các quy tắc này sẽ cho phép bạn sử dụng kích thước khung nhìn của mình rất linh hoạt và đạt năng suất tối đa.

cũ và ch

Các đơn vị ex và ch cũng như em và rem đều liên quan đến phông chữ hiện tại và cỡ chữ. Tuy nhiên, vì chúng dựa trên các thước đo dành riêng cho phông chữ, ex và ch cũng ánh xạ tới họ phông chữ, trái ngược với em và rem.

Đơn vị ch, hay đơn vị ký tự, được định nghĩa là "thước đo cải tiến" về chiều rộng của ký tự 0. Khái niệm này đã gây ra nhiều tranh luận, nhưng ý tưởng cơ bản là cho một phông chữ có chiều rộng cố định, một hình vuông có chiều rộng là N ký tự đơn vị như chiều rộng: 40ch; luôn có thể chứa một chuỗi 40 ký tự trong phông chữ cụ thể đó. Trong khi sử dụng bình thường Quy tắc đặc biệt này nằm ở cách sắp xếp chữ nổi, tất nhiên khả năng sáng tạo ở đây vượt xa những câu nói đơn giản này.

Đơn vị cũ được định nghĩa là "chiều cao x của phông chữ hiện tại HOẶC một giây của em". Chiều cao của phông chữ này - chiều cao chữ viết thường x của phông chữ đó. Thông thường, đây là khoảng giữa của phông chữ.

Có nhiều lĩnh vực có thể sử dụng các đơn vị như vậy. Thường xuyên nhất trong nhà in. Ví dụ: phần tử sup, hoạt động như chỉ số trên, có thể được thêm vào dòng bằng cách sử dụng vị trí thích hợp và giá trị cuối cùng 1ex. Bạn có thể đặt lại phần tử dưới cùng theo cách tương tự. Lỗi trình duyệt được sửa bằng các quy tắc căn chỉnh dọc dành riêng cho chỉ số trên và chỉ số dưới, nhưng nếu muốn kiểm soát nhiều hơn, bạn có thể thử cách sau:

Sup ( vị trí: tương đối; đáy: 1ex; ) phụ ( vị trí: tương đối; đáy: -1ex; )

Phần kết luận

Điều quan trọng là phải theo kịp sự phát triển và phổ biến của CSS, cũng như tìm hiểu về các công cụ mới và thêm chúng vào danh sách kỹ năng của bạn. Rất có thể, bạn sẽ gặp phải những vấn đề có thể giải quyết được nhờ sự trợ giúp của các đơn vị này. Hãy dành thời gian của bạn và đọc các đặc điểm kỹ thuật. Đăng ký nhận thông tin cập nhật từ cssweek. Và tất nhiên, đừng quên đăng ký để cập nhật hàng tuần và các video hướng dẫn miễn phí trên Tuts+!

: 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 cho bạn biết 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 cửa sổ trình duyệt được thay đổi kích thước, 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 kết chiều rộng tổng thể của tiêu đề với chiều rộng của phần tử gốc, đó 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ợ.