Nhiều sinh viên thiết kế web đáp ứng gặp khó khăn khi sử dụng tỷ lệ phần trăm cho giá trị chiều rộng. Cụ thể, có sự nhầm lẫn về cách trình duyệt tính toán các tỷ lệ phần trăm đó. Dưới đây, bạn sẽ tìm thấy giải thích chi tiết về cách tỷ lệ phần trăm hoạt động để tính toán chiều rộng trong một trang web phản hồi.
Khi bạn sử dụng pixel làm giá trị chiều rộng, kết quả rất đơn giản. Nếu bạn sử dụng CSS để đặt giá trị chiều rộng của một thành phần trong tiêu đề của tài liệu thành rộng 100 pixel, thì thành phần đó sẽ có cùng kích thước với kích thước mà bạn đặt thành rộng 100 pixel trong nội dung hoặc chân trang của trang web hoặc các khu vực khác của trang web. trang. Pixel là một giá trị tuyệt đối, vì vậy 100 pixel là 100 pixel bất kể phần tử xuất hiện ở đâu trong tài liệu của bạn. Thật không may, mặc dù các giá trị pixel rất dễ hiểu nhưng chúng không hoạt động tốt với các trang web phản hồi.
Ethan Marcotte đã đặt ra thuật ngữ “thiết kế web đáp ứng”, giải thích cách tiếp cận này có chứa 3 nguyên tắc chính:
- Lưới chất lỏng
- phương tiện chất lỏng
- Truy vấn phương tiện truyền thông
Hai điểm đầu tiên, lưới linh hoạt và phương tiện linh hoạt đạt được bằng cách sử dụng tỷ lệ phần trăm, thay vì pixel, cho các giá trị định cỡ.
Khi bạn sử dụng tỷ lệ phần trăm để thiết lập chiều rộng cho một phần tử, kích thước thực tế mà phần tử đó hiển thị sẽ khác nhau tùy thuộc vào vị trí của nó trong tài liệu. Tỷ lệ phần trăm là một giá trị tương đối, nghĩa là kích thước được hiển thị có liên quan đến các thành phần khác trong tài liệu của bạn.
Chẳng hạn, nếu bạn đặt chiều rộng của hình ảnh thành 50%, điều này không có nghĩa là hình ảnh sẽ hiển thị ở một nửa kích thước bình thường của nó. Đây là một quan niệm sai lầm phổ biến.
Nếu một hình ảnh thực sự rộng 600 pixel, thì việc sử dụng giá trị CSS để hiển thị ở mức 50% không có nghĩa là nó sẽ rộng 300 pixel trong trình duyệt web. Giá trị phần trăm này được tính toán dựa trên phần tử chứa hình ảnh đó chứ không phải kích thước thực của chính hình ảnh đó. Nếu vùng chứa (có thể là một phần chia hoặc một số thành phần HTML khác) rộng 1000 pixel, thì hình ảnh sẽ hiển thị ở 500 pixel vì giá trị đó bằng 50% chiều rộng của vùng chứa. Nếu phần tử chứa rộng 400 pixel, thì hình ảnh sẽ chỉ hiển thị ở 200 pixel, vì giá trị đó là 50% của vùng chứa. Hình ảnh được đề cập ở đây có kích thước 50% phụ thuộc hoàn toàn vào phần tử chứa nó.
Hãy nhớ rằng, thiết kế đáp ứng là linh hoạt. Bố cục và kích thước sẽ thay đổi khi kích thước màn hình/thiết bị thay đổi. Nếu bạn nghĩ về điều này theo nghĩa vật lý, phi web, nó giống như có một hộp các tông mà bạn đang chất đầy vật liệu đóng gói. Nếu bạn nói rằng hộp nên được lấp đầy một nửa bằng vật liệu đó, số lượng bao bì bạn cần sẽ khác nhau tùy thuộc vào kích thước của hộp. Điều này cũng đúng với tỷ lệ phần trăm chiều rộng trong thiết kế web.
Trong ví dụ về hình ảnh/vùng chứa, chúng tôi đã sử dụng các giá trị pixel cho phần tử chứa để cho biết hình ảnh phản hồi sẽ hiển thị như thế nào. Trên thực tế, phần tử chứa cũng sẽ được đặt dưới dạng phần trăm và hình ảnh hoặc các phần tử khác bên trong vùng chứa đó sẽ nhận giá trị của chúng dựa trên phần trăm của phần trăm.
Đây là một ví dụ khác.
Giả sử bạn có một trang web trong đó toàn bộ trang web được chứa trong một bộ phận có lớp “vùng chứa” (một phương pháp thiết kế web phổ biến). Bên trong bộ phận đó là ba bộ phận khác mà cuối cùng bạn sẽ tạo kiểu để hiển thị dưới dạng 3 cột dọc.
Bây giờ, bạn có thể sử dụng CSS để đặt kích thước của phần “vùng chứa” đó thành 90%. Trong ví dụ này, bộ phận vùng chứa không có phần tử nào khác bao quanh nó ngoài phần thân mà chúng tôi chưa đặt thành bất kỳ giá trị cụ thể nào. Theo mặc định, phần thân sẽ hiển thị 100% cửa sổ trình duyệt. Do đó, tỷ lệ phần trăm của bộ phận “vùng chứa” sẽ dựa trên kích thước của cửa sổ trình duyệt. Khi cửa sổ trình duyệt đó thay đổi về kích thước, thì kích thước của “thùng chứa” này cũng vậy. Vì vậy, nếu cửa sổ trình duyệt rộng 2000 pixel, sự phân chia này sẽ hiển thị ở 1800 pixel. Đây được tính là 90 phần trăm của 2000 (2000 x .90 = 1800)), là kích thước của trình duyệt.
Nếu mỗi một trong các phần chia “col” được tìm thấy trong “vùng chứa” được đặt thành kích thước 30%, thì mỗi phần trong số chúng sẽ rộng 540 pixel trong ví dụ này. Giá trị này được tính bằng 30% trong số 1800 pixel mà vùng chứa hiển thị ở (1800 x .30 = 540). Nếu chúng tôi thay đổi tỷ lệ phần trăm của vùng chứa đó, các phần chia bên trong này cũng sẽ thay đổi kích thước mà chúng hiển thị vì chúng phụ thuộc vào phần tử vùng chứa đó.
Giả sử rằng các cửa sổ trình duyệt vẫn ở độ rộng 2000 pixel, nhưng chúng tôi thay đổi giá trị phần trăm của vùng chứa thành 80% thay vì 90%. Điều đó có nghĩa là hiện tại nó sẽ hiển thị ở độ rộng 1600 pixel (2000 x .80 = 1600). Ngay cả khi chúng tôi không thay đổi CSS cho kích thước của 3 phần chia “col” của chúng tôi và để chúng ở mức 30%, thì bây giờ chúng sẽ hiển thị khác do phần tử chứa chúng, tức là ngữ cảnh mà chúng được định kích thước, đã thay đổi. 3 phần chia đó hiện sẽ hiển thị mỗi phần rộng 480 pixel, tức là 30% của 1600 hoặc kích thước của vùng chứa 1600 x .30 = 480).
Đi xa hơn nữa, nếu có một hình ảnh bên trong một trong các phần chia “col” này và hình ảnh đó được định cỡ bằng tỷ lệ phần trăm, thì bối cảnh cho việc định cỡ của nó sẽ là chính “col”. Vì phần “col” đó thay đổi về kích thước nên hình ảnh bên trong nó cũng vậy. Vì vậy, nếu kích thước của trình duyệt hoặc “vùng chứa” thay đổi, điều đó sẽ ảnh hưởng đến ba phần chia “col”, do đó sẽ thay đổi kích thước của hình ảnh bên trong “col”. Như bạn có thể thấy, tất cả những thứ này đều được kết nối khi nói đến các giá trị kích thước theo tỷ lệ phần trăm.
Khi bạn xem xét cách một phần tử bên trong trang web sẽ hiển thị khi giá trị phần trăm được sử dụng cho chiều rộng của phần tử đó, bạn cần hiểu ngữ cảnh mà phần tử đó nằm trong phần đánh dấu của trang.
Tỷ lệ phần trăm đóng một vai trò quan trọng trong việc tạo bố cục cho các trang web phản hồi. Cho dù bạn đang định cỡ hình ảnh một cách thích ứng hay sử dụng tỷ lệ phần trăm độ rộng để tạo một lưới thực sự linh hoạt có các kích thước tương đối với nhau, thì việc hiểu các tính toán này sẽ là cần thiết để đạt được giao diện mà bạn mong muốn.