Một

< div class = "fullscreen a" > < p >Một< p > < / div >

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

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; )

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

Tiêu đề lý tưởng

Bạn có thể đã nghe nói 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 đề sao cho chúng chiếm toàn bộ chiều rộng của phần tử gốc. 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 giá trị ban đầu chính xác cho cỡ chữ.

Vấn đề chính với kích thước phông chữ và đơn 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. Bạn có thể đọc thêm về cách đặt chính xác kích thước văn bản bằng cách sử dụng đơn vị đo lường và hàm calc() 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ị thuộc tính lề trên và dưới là [(100 - Height)/2]vh.

Căn giữa ( chiều rộng: 60vw; chiều cao: 70vh; ký quỹ: 15vh tự động;

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.

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à một giá trị có thể thay đổi phụ 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 font-size). Mỗi trình duyệt có 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à những 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 biểu thị 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 chỉ được thêm khi giá trị bằng 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 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.

×

Đơn vị CSS đóng 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 số dương 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ố đi kèm với chữ viết tắt gồm hai chữ cái đại diện cho đơn vị độ 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 trên các 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 của màn hình. Đối với máy in và màn hình có độ phân giải rất cao, một pixel trong CSS tương đương với 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 dùng làm hướng dẫn cho các đơn vị 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. Giá trị của chúng phụ thuộc vào các giá trị hoặc hàm được chỉ định khác. 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 dành riêng cho phông chữ đề cập đến kích thước phông chữ đặt trước hoặc giá trị của thuộc tính 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 của chữ x viết thường của 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 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 của 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.

CSS3 có đơn vị đo lường mới. (Tôi nghĩ tôi đã nói về điều này rồi. tiếng anh) Bạn đã nghe nói về px, pt, em và rem mới. Chúng ta hãy xem xét thêm một vài điều nữa: vw và vh.

Thường có những thành phần trong bố cục được đảm bảo phù hợp với khung nhìn của trình duyệt. Nói chung, JavaScript được sử dụng cho việc này. Hãy kiểm tra kích thước của khung nhìn và thay đổi kích thước các phần tử cho phù hợp. Nếu người dùng thay đổi kích thước cửa sổ trình duyệt, quy trình sẽ được lặp lại.

Sử dụng vw/vh chúng ta có thể đặt kích thước của các phần tử tương ứng với kích thước của khung nhìn. Đơn vị vw/vh rất thú vị vì 1vw là đơn vị bằng 1/100 chiều rộng của khung nhìn. Ví dụ: để gán cho một phần tử chiều rộng bằng với chiều rộng của khung nhìn, bạn cần đặt chiều rộng: 100vw.

Làm thế nào nó có thể được sử dụng

Hộp đèn là một ứng cử viên tuyệt vời để sử dụng vw và vh vì chúng thường được định vị so với khung nhìn, tuy nhiên tôi thấy rằng vị trí: cố định với các giá trị trên, dưới, trái và phải sẽ dễ sử dụng hơn vì bạn không phải đặt chiều cao và chiều rộng cả.

Bạn có thể sử dụng các đơn vị đo lường mới để đặt kích thước của các phần tử ở trạng thái bình thường. Ví dụ: tôi có thể đăng ảnh chụp màn hình trên trang. Chiều cao của những ảnh chụp màn hình này không được vượt quá chiều cao của khung nhìn. Để làm điều này tôi có thể đặt chiều cao tối đa của hình ảnh:

Img ( chiều cao tối đa:95vh; )

Trong trường hợp này, tôi đang đặt chiều cao thành 95vh để chừa một khoảng trống xung quanh khi chúng hiển thị trên màn hình.

Hỗ trợ trình duyệt

Nếu rem được hầu hết các trình duyệt chính hỗ trợ, bao gồm cả IE9, thì việc sử dụng vw và vh đáng để bạn tạm dừng. Hiện tại chỉ có Internet Explorer 9 hỗ trợ chúng.

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ế đáp ứ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, các đơn vị khung nhìn (vh và vw) trùng lặp 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 dành 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. 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 của một phần tử, được xác định bằng phần trăm, có liên quan đến phần tử cha của nó, nên chúng ta chỉ có thể lấy một phần tử có chiều cao bằng chiều cao 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 để tạo thành phần tử html gốc hoặc sử dụng một số cách 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

Cách sử dụng điển hình của đơn vị vh là tạo 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 lớn hơn chiều rộng của phần tử cha */ max-height: 90vh; /* Không lớn hơn 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.