M

MLOG

Tiếng Việt

Khai phá sức mạnh của các đơn vị viewport CSS (vw, vh, vmin, vmax, vi, vb) để tạo ra các bố cục web thực sự đáp ứng và có thể mở rộng, thích ứng liền mạch với mọi thiết bị. Tìm hiểu các ứng dụng thực tế, các phương pháp hay nhất và kỹ thuật nâng cao.

Làm Chủ Đơn Vị Viewport CSS: Hướng Dẫn Toàn Diện về Thiết Kế Đáp Ứng

Trong thế giới phát triển web không ngừng biến đổi, việc tạo ra các thiết kế đáp ứng có thể thích ứng liền mạch với nhiều kích thước màn hình khác nhau là điều tối quan trọng. Các Đơn vị Viewport CSS (vw, vh, vmin, vmax, vi, và vb) cung cấp một cách mạnh mẽ để đạt được điều này, mang lại một phương pháp linh hoạt và có thể mở rộng để định kích thước các phần tử tương đối so với viewport. Hướng dẫn toàn diện này sẽ đi sâu vào sự phức tạp của các đơn vị viewport, khám phá chức năng, ứng dụng thực tế và các phương pháp hay nhất để triển khai.

Tìm Hiểu về Các Đơn Vị Viewport

Đơn vị viewport là các đơn vị độ dài tương đối trong CSS dựa trên kích thước của viewport của trình duyệt. Không giống như các đơn vị cố định như pixel (px), vốn không đổi bất kể kích thước màn hình, các đơn vị viewport tự động điều chỉnh giá trị của chúng dựa trên kích thước của viewport. Khả năng thích ứng này làm cho chúng trở nên lý tưởng để tạo ra các bố cục linh hoạt và đáp ứng, trông tuyệt vời trên mọi thiết bị, từ điện thoại thông minh đến màn hình máy tính để bàn lớn. Lợi thế chính là các thiết kế được xây dựng bằng đơn vị viewport sẽ co giãn một cách hài hòa, duy trì tỷ lệ và sự hấp dẫn về mặt hình ảnh trên các độ phân giải màn hình khác nhau.

Các Đơn Vị Viewport Cốt Lõi: vw, vh, vmin, vmax

Các Đơn Vị Viewport Logic: vi, vb

Các đơn vị viewport logic mới hơn, vi và vb, tương đối với kích thước *inline* và *block* của viewport. Các đơn vị này nhạy cảm với chế độ viết và hướng văn bản của tài liệu, làm cho chúng đặc biệt hữu ích cho các trang web được quốc tế hóa. Điều này cho phép tạo ra các bố cục có khả năng thích ứng vốn có với các hệ thống chữ viết khác nhau.

Ví dụ: Hãy xem xét một trang web được thiết kế cho cả tiếng Anh (từ trái sang phải) và tiếng Ả Rập (từ phải sang trái). Việc sử dụng vi cho padding hoặc margin ở các cạnh của một vùng chứa sẽ tự động điều chỉnh sang đúng phía dựa trên hướng ngôn ngữ, đảm bảo khoảng cách nhất quán bất kể sở thích ngôn ngữ của người dùng.

Các Ứng Dụng Thực Tế của Đơn Vị Viewport

Các đơn vị viewport có thể được sử dụng trong nhiều tình huống khác nhau để tạo ra các bố cục web đáp ứng và hấp dẫn về mặt hình ảnh. Dưới đây là một số trường hợp sử dụng phổ biến:

1. Các Phần Có Chiều Cao Toàn Màn Hình

Tạo các phần có chiều cao đầy đủ bao trùm toàn bộ viewport là một mẫu thiết kế phổ biến. Các đơn vị viewport làm cho việc này trở nên cực kỳ dễ dàng:

.full-height-section {
 height: 100vh;
 width: 100vw; /* Đảm bảo nó cũng lấp đầy toàn bộ chiều rộng */
}

Đoạn mã này đảm bảo rằng phần tử .full-height-section luôn chiếm toàn bộ chiều cao của viewport, bất kể kích thước màn hình. width: 100vw; đảm bảo rằng phần tử cũng lấp đầy toàn bộ chiều rộng, tạo ra một phần toàn viewport thực sự.

2. Kiểu Chữ Đáp Ứng

Các đơn vị viewport có thể được sử dụng để tạo ra kiểu chữ đáp ứng, co giãn tỷ lệ với kích thước viewport. Điều này đảm bảo rằng văn bản vẫn dễ đọc và hấp dẫn về mặt hình ảnh trên tất cả các thiết bị.

h1 {
 font-size: 8vw; /* Cỡ chữ thay đổi theo chiều rộng viewport */
}

p {
 font-size: 2vh; /* Cỡ chữ thay đổi theo chiều cao viewport */
}

Trong ví dụ này, font-size của phần tử h1 được đặt thành 8vw, có nghĩa là nó sẽ bằng 8% chiều rộng của viewport. Khi chiều rộng viewport thay đổi, cỡ chữ sẽ điều chỉnh tương ứng. Tương tự, font-size của phần tử p được đặt thành 2vh, co giãn theo chiều cao của viewport.

3. Các Hộp Giữ Tỷ Lệ Khung Hình

Việc duy trì tỷ lệ khung hình cho hình ảnh và video có thể phức tạp, nhưng các đơn vị viewport, kết hợp với thủ thuật padding-top, cung cấp một giải pháp đơn giản:

.aspect-ratio-box {
 width: 100%;
 position: relative;
}

.aspect-ratio-box::before {
 content: "";
 display: block;
 padding-top: 56.25%; /* Tỷ lệ khung hình 16:9 (chiều cao/chiều rộng * 100) */
}

.aspect-ratio-box > * {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Kỹ thuật này sử dụng một phần tử giả (::before) với giá trị padding-top được tính toán dựa trên tỷ lệ khung hình mong muốn (trong trường hợp này là 16:9). Nội dung bên trong .aspect-ratio-box sau đó được định vị tuyệt đối để lấp đầy không gian có sẵn, duy trì tỷ lệ khung hình bất kể kích thước màn hình. Điều này cực kỳ hữu ích để nhúng video hoặc hình ảnh cần duy trì tỷ lệ của chúng.

4. Tạo Bố Cục Lưới Linh Hoạt

Các đơn vị viewport có thể được sử dụng để tạo các bố cục lưới linh hoạt, trong đó các cột và hàng điều chỉnh tỷ lệ theo kích thước viewport. Điều này có thể đặc biệt hữu ích để tạo bảng điều khiển và các bố cục phức tạp khác.

.grid-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); /* Mỗi cột có chiều rộng tối thiểu 20% chiều rộng viewport */
 grid-gap: 1vw;
}

.grid-item {
 padding: 1vw;
 background-color: #f0f0f0;
}

Ở đây, thuộc tính grid-template-columns sử dụng minmax(20vw, 1fr) để đảm bảo rằng mỗi cột có chiều rộng tối thiểu 20% chiều rộng viewport nhưng có thể phát triển để lấp đầy không gian có sẵn. grid-gap cũng được đặt bằng 1vw, đảm bảo rằng khoảng cách giữa các mục lưới co giãn tỷ lệ với kích thước viewport.

5. Khoảng Cách và Đệm Đáp Ứng

Việc kiểm soát khoảng cách và đệm bằng các đơn vị viewport mang lại sự hài hòa về mặt hình ảnh nhất quán trên các thiết bị khác nhau. Nó đảm bảo các phần tử không bị quá chật chội hoặc quá thưa thớt, bất kể kích thước màn hình.

.container {
 padding: 5vw;
 margin-bottom: 3vh;
}

Trong ví dụ này, phần tử .container có đệm bằng 5% chiều rộng viewport ở tất cả các cạnh và lề dưới bằng 3% chiều cao viewport.

6. Các Thành Phần Giao Diện Người Dùng Có Thể Mở Rộng

Các nút, trường nhập liệu và các thành phần giao diện người dùng khác có thể được làm cho đáp ứng tốt hơn bằng cách định kích thước chúng bằng các đơn vị viewport. Điều này cho phép các thành phần giao diện người dùng duy trì tỷ lệ tương đối của chúng, nâng cao trải nghiệm người dùng trên các màn hình khác nhau.

.button {
 font-size: 2.5vh;
 padding: 1vh 2vw;
 border-radius: 0.5vh;
}

Lớp .button được định nghĩa với cỡ chữ dựa trên chiều cao viewport (2.5vh) và đệm dựa trên cả chiều cao và chiều rộng viewport. Điều này đảm bảo rằng văn bản của nút vẫn dễ đọc và kích thước nút điều chỉnh phù hợp với các kích thước màn hình khác nhau.

Các Phương Pháp Hay Nhất Khi Sử Dụng Đơn Vị Viewport

Mặc dù các đơn vị viewport cung cấp một cách mạnh mẽ để tạo ra các thiết kế đáp ứng, điều quan trọng là phải sử dụng chúng một cách thận trọng và tuân theo các phương pháp hay nhất để tránh các cạm bẫy tiềm ẩn:

1. Cân Nhắc Giá Trị Tối Thiểu và Tối Đa

Các đơn vị viewport đôi khi có thể dẫn đến các giá trị cực đoan trên các màn hình rất nhỏ hoặc rất lớn. Để ngăn chặn điều này, hãy xem xét sử dụng các hàm CSS min(), max(), và clamp() để đặt giới hạn tối thiểu và tối đa cho các giá trị đơn vị viewport.

h1 {
 font-size: clamp(2rem, 8vw, 5rem); /* Cỡ chữ tối thiểu là 2rem, tối đa là 5rem, và thay đổi theo chiều rộng viewport ở khoảng giữa */
}

Hàm clamp() nhận ba đối số: giá trị tối thiểu, giá trị ưu tiên và giá trị tối đa. Trong ví dụ này, font-size sẽ ít nhất là 2rem, nhiều nhất là 5rem, và sẽ co giãn tỷ lệ với chiều rộng viewport (8vw) giữa các giới hạn đó. Điều này ngăn văn bản trở nên quá nhỏ trên màn hình nhỏ hoặc quá lớn trên màn hình lớn.

2. Kết Hợp với các Đơn Vị Khác

Các đơn vị viewport hoạt động tốt nhất khi được kết hợp với các đơn vị CSS khác, chẳng hạn như em, rem, và px. Điều này cho phép bạn tạo ra một thiết kế tinh tế và linh hoạt hơn, có tính đến cả kích thước viewport và ngữ cảnh nội dung.

p {
 font-size: calc(1rem + 0.5vw); /* Cỡ chữ cơ bản là 1rem cộng với một hệ số tỷ lệ */
 line-height: 1.6;
}

Trong ví dụ này, font-size được tính toán bằng hàm calc(), cộng một cỡ chữ cơ bản là 1rem với một hệ số tỷ lệ là 0.5vw. Điều này đảm bảo rằng văn bản luôn dễ đọc, ngay cả trên các màn hình nhỏ, trong khi vẫn co giãn tỷ lệ với kích thước viewport.

3. Kiểm Tra trên Nhiều Thiết Bị và Trình Duyệt Khác Nhau

Như với bất kỳ kỹ thuật phát triển web nào, việc kiểm tra thiết kế của bạn trên nhiều loại thiết bị và trình duyệt là rất quan trọng để đảm bảo tính tương thích đa trình duyệt và hiệu suất tối ưu. Sử dụng các công cụ dành cho nhà phát triển của trình duyệt để mô phỏng các kích thước và độ phân giải màn hình khác nhau, và kiểm tra thiết kế của bạn trên các thiết bị vật lý thực tế bất cứ khi nào có thể. Mặc dù nhìn chung được hỗ trợ tốt, có thể tồn tại những khác biệt nhỏ giữa các trình duyệt.

4. Cân Nhắc đến Khả Năng Truy Cập

Khi sử dụng các đơn vị viewport cho kiểu chữ, hãy đảm bảo rằng văn bản vẫn dễ đọc và có thể truy cập được đối với người dùng khuyết tật. Chú ý đến độ tương phản màu, cỡ chữ và chiều cao dòng để đảm bảo văn bản dễ đọc cho tất cả người dùng. Các công cụ như trình kiểm tra độ tương phản WebAIM có thể hữu ích để xác định tỷ lệ tương phản màu phù hợp. Ngoài ra, tránh đặt font-size hoặc các thuộc tính liên quan đến kích thước khác trên phần tử html trực tiếp bằng các đơn vị viewport, vì điều này có thể cản trở sở thích của người dùng về kích thước văn bản.

5. Sử Dụng với Biến CSS (Thuộc Tính Tùy Chỉnh)

Việc sử dụng các biến CSS (thuộc tính tùy chỉnh) với các đơn vị viewport giúp tăng cường khả năng bảo trì và cho phép điều chỉnh dễ dàng hơn trên toàn bộ stylesheet của bạn.

:root {
 --base-padding: 2vw;
}

.element {
 padding: var(--base-padding);
}

.another-element {
 margin-left: var(--base-padding);
}

Trong ví dụ này, biến --base-padding được định nghĩa với giá trị là 2vw. Biến này sau đó được sử dụng để đặt đệm và lề của các phần tử khác nhau, cho phép bạn dễ dàng điều chỉnh khoảng cách trên toàn bộ trang web của mình bằng cách thay đổi giá trị của biến ở một nơi.

Kỹ Thuật Nâng Cao và Những Lưu Ý

1. Sử Dụng JavaScript để Điều Chỉnh Động

Trong một số trường hợp nhất định, bạn có thể cần phải điều chỉnh động các giá trị đơn vị viewport dựa trên tương tác của người dùng hoặc các sự kiện khác. JavaScript có thể được sử dụng để truy cập kích thước viewport và cập nhật các biến CSS tương ứng.

// JavaScript
function updateViewportVariables() {
 const vh = window.innerHeight * 0.01;
 document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('resize', updateViewportVariables);
updateViewportVariables(); // Gọi lần đầu

// CSS
.element {
 height: calc(var(--vh, 1vh) * 50); /* Dự phòng là 1vh nếu --vh không được định nghĩa */
}

Đoạn mã này sử dụng JavaScript để tính toán chiều cao viewport và đặt một biến CSS (--vh) tương ứng. .element sau đó sử dụng biến này để đặt chiều cao của nó, đảm bảo rằng nó luôn chiếm 50% chiều cao của viewport. Việc dự phòng là `1vh` đảm bảo rằng phần tử vẫn có chiều cao hợp lý ngay cả khi biến CSS không được đặt chính xác.

2. Xử Lý Hiển Thị Bàn Phím Di Động

Trên các thiết bị di động, kích thước viewport có thể thay đổi khi bàn phím ảo được hiển thị. Điều này có thể gây ra sự cố với các bố cục dựa vào đơn vị viewport cho các phần có chiều cao đầy đủ. Một cách tiếp cận để giảm thiểu điều này là sử dụng các đơn vị Viewport Lớn, Nhỏ và Động, cho phép các nhà phát triển chỉ định hành vi cho những tình huống này. Chúng có sẵn với các đơn vị `lvh`, `svh`, và `dvh`. Đơn vị `dvh` điều chỉnh khi bàn phím mềm được hiển thị. Lưu ý rằng hỗ trợ có thể bị hạn chế trong một số trình duyệt cũ hơn.

.full-height-section {
 height: 100dvh;
}

3. Tối Ưu Hóa Hiệu Suất

Mặc dù các đơn vị viewport nhìn chung hoạt động hiệu quả, việc sử dụng chúng quá mức có thể ảnh hưởng đến tốc độ hiển thị trang. Để tối ưu hóa hiệu suất, hãy tránh sử dụng đơn vị viewport cho mọi phần tử trên trang của bạn. Thay vào đó, hãy tập trung sử dụng chúng một cách chiến lược cho các thành phần bố cục chính và kiểu chữ. Ngoài ra, hãy giảm thiểu số lần bạn tính toán lại các giá trị đơn vị viewport trong JavaScript.

Ví Dụ Qua Các Quốc Gia & Nền Văn Hóa Khác Nhau

Vẻ đẹp của các đơn vị viewport là chúng giúp tạo ra một trải nghiệm người dùng nhất quán trên các địa điểm đa dạng. Hãy xem xét cách các đơn vị viewport có thể được áp dụng với các cân nhắc về văn hóa:

Kết Luận

Các Đơn vị Viewport CSS là một công cụ không thể thiếu để tạo ra các thiết kế web thực sự đáp ứng và có thể mở rộng, thích ứng liền mạch với mọi thiết bị. Bằng cách hiểu chức năng của vw, vh, vmin, vmax, vi, và vb, và tuân theo các phương pháp hay nhất, bạn có thể khai thác toàn bộ tiềm năng của các đơn vị viewport và tạo ra các trang web hấp dẫn về mặt hình ảnh và thân thiện với người dùng, mang lại trải nghiệm nhất quán trên tất cả các nền tảng. Hãy tận dụng các đơn vị này để xây dựng những trải nghiệm web có thể truy cập toàn cầu và thẩm mỹ, bất kể thiết bị hay nền tảng văn hóa của người dùng.

Hãy nhớ kiểm tra kỹ lưỡng trên các trình duyệt và thiết bị khác nhau và luôn ưu tiên khả năng truy cập để đảm bảo thiết kế của bạn bao hàm và có thể sử dụng được cho tất cả mọi người.