Tìm hiểu cách trình duyệt web xác định hiển thị bằng cách sử dụng giá trị phần trăm
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 các giá trị độ rộng. Cụ thể, có sự nhầm lẫn với cách trình duyệt tính toán 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 trang web đáp ứng.
Sử dụng pixel cho giá trị chiều rộng
Khi bạn sử dụng pixel làm giá trị độ rộng, kết quả sẽ rất đơn giản. Nếu bạn sử dụng CSS để đặt giá trị độ rộng của phần tử trong tiêu đề của tài liệu thành 100 pixel, phần tử đó sẽ có cùng kích thước với một phần mà bạn đặt 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. Pixel là giá trị tuyệt đối, vì vậy, 100 pixel là 100 pixel bất kể vị trí của phần tử trong tài liệu của bạn. Thật không may, trong khi các giá trị pixel dễ hiểu, chúng không hoạt động tốt trong các trang web đáp ứng.
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
- Chất lỏng
- Truy vấn phương tiện truyền thông
Hai điểm đầu tiên đó là lưới chất lỏng và chất lỏng, đạt được bằng cách sử dụng tỷ lệ phần trăm thay vì pixel để định kích thước.
Sử dụng tỷ lệ phần trăm cho giá trị chiều rộng
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 mà phần tử hiển thị tại 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, có nghĩa là kích thước được hiển thị có liên quan đến các yếu tố khác trong tài liệu của bạn.
Ví dụ: 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 hình ảnh. Đây là một quan niệm sai lầm phổ biến.
Nếu hình ảnh rộng 600 pixel, thì việc sử dụng giá trị CSS để hiển thị nó ở 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 đó, không phải là kích thước gốc của hình ảnh. Nếu vùng chứa (có thể là một bộ phận hoặc một phần tử 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 có chiều 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à chất lỏng. 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 trong điều kiện thực tế, không phải web, nó giống như có một hộp các tông mà bạn đang làm đầy với vật liệu đóng gói. Nếu bạn nói rằng hộp nên được một nửa đầy 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 độ rộng phần trăm trong thiết kế web.
Tỷ lệ phần trăm dựa trên tỷ lệ phần trăm khác
Trong ví dụ về hình ảnh / vùng chứa, tôi đã sử dụng các giá trị pixel cho phần tử chứa để hiển thị hình ảnh phản hồi sẽ hiển thị như thế nào. Trong thực tế, phần tử chứa cũng sẽ được đặt thành 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 được giá trị của chúng dựa trên phần trăm phần trăm.
Đây là một ví dụ khác cho thấy điều này trong thực tế.
Giả sử bạn có một trang web nơi toàn bộ trang web được chứa trong một bộ phận với một lớp "container" (một thực hành 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. HTML đó có thể trông như thế này:
Bây giờ, bạn có thể sử dụng CSS để đặt kích thước của bộ 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ử khác bao quanh phần tử đó ngoài phần tử mà chúng ta chưa đặt cho bất kỳ giá trị cụ thể nào. Theo mặc định, nội dung sẽ hiển thị dưới dạng 100% cửa sổ trình duyệt. Do đó, tỷ lệ phần trăm của bộ phận "container" 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, do đó kích thước của "vùng chứa" này. Vì vậy, nếu cửa sổ trình duyệt rộng 2000 pixel, bộ phận này sẽ hiển thị ở 1800 pixel. Điều này được tính bằng 90 phần trăm năm 2000 (2000 x. 90 = 1800)), đó là kích thước của trình duyệt.
Nếu mỗi bộ phận “col” được tìm thấy trong “vùng chứa” được đặt ở kích thước 30% thì mỗi phần trong số đó sẽ rộng 540 pixel trong ví dụ này. Giá trị này được tính bằng 30% của 1800 pixel mà vùng chứa hiển thị tại (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 bộ phận bên trong này cũng sẽ thay đổi về kích thước chúng hiển thị vì chúng phụ thuộc vào phần tử 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à nó sẽ hiển thị rộng 1600 pixel ngay bây giờ (2000 x .80 = 1600). Thậm chí nếu chúng ta không thay đổi CSS cho kích thước của 3 “col” của chúng ta, và để chúng ở mức 30%, chúng sẽ hiển thị khác nhau ngay từ khi phần tử chứa của chúng, đó là ngữ cảnh mà chúng có kích thước, đã thay đổi. Hiện tại, 3 bộ phận này sẽ hiển thị rộng 480 pixel, tương đương 30% 1600 hoặc kích thước của vùng chứa (1600 x .30 = 480).
Việc này còn 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” và hình ảnh đó được định cỡ bằng phần trăm, bối cảnh cho kích thước của nó sẽ là “col”. Vì bộ phận “col” đó thay đổi về kích thước, nên hình ảnh bên trong nó. Vì vậy, nếu kích thước của trình duyệt hoặc "container" thay đổi, điều đó sẽ ảnh hưởng đến ba "col" đơn vị, do đó sẽ thay đổi kích thước của hình ảnh bên trong "col". Như bạn thấy, tất cả đều được kết nối khi nó nói đến các giá trị định kích thước theo phần trăm.
Khi bạn xem xét một phần tử bên trong trang web sẽ hiển thị như thế nào khi một giá trị phần trăm được sử dụng cho chiều rộng của nó, bạn cần phải hiểu ngữ cảnh trong đó phần tử đó nằm trong đánh dấu của trang.
Tóm tắt
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 đáp ứng . Cho dù bạn định kích thước hình ảnh một cách có trách nhiệm hay sử dụng tỷ lệ phần trăm để tạo ra một mạng lưới thật sự có kích thước tương đối với nhau, việc hiểu các tính toán này sẽ cần thiết để đạt được diện mạo bạn mong muốn.