CSS reponsive cách thiết kế responsive

CSS reponsive cách thiết kế responsive

Rate this post

Tối ưu hóa trang web cho thiết bị di động yêu cầu triển khai Responsive design. Đây là lý do tại sao hầu hết các nhà phát triển web hiện đang tự hỏi làm thế nào để làm cho các trang web responsive trong hầu hết các dự án mà họ xử lý.

Các bài viết liên quan:

Responsive design là gì?

Responsive design là cách thức xây dựng website nhằm đến mục tiêu hoạt động tốt trên nhiều loại thiết bị sử dụng: PC, laptop, mobile,…Với responsive design chúng ta nhằm hướng đến một phiên bản duy nhất phù hợp với nhiều loại màn hình thiết bị.

Ngoài ra, sự thân thiện với thiết bị di động cũng là 1 trong hơn 200+ yếu tố xếp hạng của Google đối với các website.

Đương nhiên, các nhà phát triển và thiết kế trang web rất chú trọng vào việc tạo ra các trang web responsive. Bài viết này sẽ khám phá một số phương pháp mà họ có thể thực hiện điều này và kiểm tra các trang web về mức độ phản hồi thích hợp.

Cách thiết kế website responsive

Đặt các Responsive Breakpoints hợp lý

Trong Responsive design, Responsive Breakpoints là point mà tại đó website sẽ được responsive theo chuẩn để cung cấp trải nghiệm tốt nhất trên thiết bị nhất định.

Mọi trang web đều được sử dụng bới các thiết bị có kích thước những màn hình khác nhau. Phần mềm phải hiển thị hoàn hảo trên từng kích thước màn hình. Nội dung hoặc hình ảnh không được làm biến dạng, cắt bỏ hoặc che khuất.

Để cho phép điều này, các nhà phát triển phải sử dụng các Responsive breakpoints, đôi khi được gọi là breakpoint CSS hoặc breakpoint truy vấn phương tiện. Đây là những điểm được xác định trong code. Nội dung trang web responsive những điểm này và tự điều chỉnh kích thước màn hình để hiển thị bố cục chính xác.

Với các điểm ngắt CSS tại chỗ, nội dung trang web sẽ tự căn chỉnh với kích thước màn hình và tự hiển thị theo cách dễ nhìn và tạo điều kiện cho người dùng trực quan.

Sử dụng các Responsive breakpoints cho các độ lớn các thiết bi khác nhau như: PC, laptop, mobile,… thường thì sẽ là kích thước

  • 1920 × 1080 (8,89%)
  • 1366 × 768 (8,44%)
  • 360 × 640 (7,28%)
  • 414 × 896 (4,58%)
  • 1536 × 864 (3,88%)
  • 375 × 667 (3,75%)

Để tìm hiểu thêm về cách đặt các Responsive breakpoints phù hợp, hãy khám phá các kích thước màn hình lý tưởng cho Responsive design.

Sử dụng layout Grid linh hoạt

Trước đây, các trang web dựa trên phép đo pixel. Tuy nhiên, giờ đây, chúng được xây dựng trên cái được gọi là Fluid Grid.

Về cơ bản, một Fluid Grid định vị và đặt các phần tử web trên một trang web tương ứng với kích thước màn hình mà nó được hiển thị. Thay vì tạo mọi thứ theo một kích thước cụ thể, được đặt bằng pixel, các phần tử trên Fluid Grid sẽ phản hồi và thay đổi kích thước để phù hợp với kích thước của màn hình.

Một Fluid Grid được chia thành các cột; chiều cao và chiều rộng được chia tỷ lệ, không được đặt thành kích thước cố định. Tỷ lệ văn bản và các phần tử phụ thuộc vào kích thước màn hình.

Việc xây dựng các quy tắc của Fluid Grid được thực hiện bằng cách làm việc trên mã nguồn của trang web.

Fluid Grid cũng giúp giữ cho một trang web nhất quán về mặt trực quan trên nhiều thiết bị. Nó cũng cung cấp khả năng kiểm soát chặt chẽ hơn đối với các căn chỉnh và cho phép ra quyết định liên quan đến thiết kế nhanh hơn.

Kiểm tra màn hình cảm ứng

Khi tự hỏi làm thế nào để làm cho một trang web responsive, hãy nghĩ đến màn hình cảm ứng. Hầu hết các thiết bị di động (điện thoại và máy tính bảng) hiện nay đều được trang bị màn hình cảm ứng. Một số máy tính xách tay cũng đang bắt kịp, cung cấp màn hình cảm ứng cùng với các chức năng của bàn phím.

Đương nhiên, một trang web responsive sẽ phải tự hiệu chỉnh để được truy cập qua màn hình cảm ứng. Ví dụ: giả sử có một menu thả xuống trên trang chủ.

Ở chế độ xem máy tính để bàn, mỗi mục menu phải đủ lớn để có thể ấn vào bằng đầu ngón tay trên màn hình cảm ứng.

Trên màn hình di động, các phần tử nhỏ hơn như nút cũng sẽ dễ phát hiện và chọn hơn.

Để làm như vậy, hãy sử dụng hình ảnh, CTA hoặc tối ưu hóa các yếu tố này để hiển thị đúng trên nhiều màn hình.

Chạy Kiểm tra nhanh để kiểm tra Sự kiện touch

Sử dụng hình ảnh và video responsive

  1. Hình ảnh responsive

Sử dụng các thuộc tính thẻ hình ảnh hiện đại để làm cho hình ảnh responsive với nhiều thiết bị và độ phân giải màn hình. Nghiên cứu ví dụ dưới đây:

</style>

<picture>
<source type="image/webp" srcset="https://websitehcm.com/image-100.webp 1x, https://websitehcm.com/image-200.webp 2x">
<source type="image/png" srcset="https://websitehcm.com/image-100.png 1x, https://websitehcm.com/image-200.png 2x">
<img alt="my image" src="https://websitehcm.com/image-200.png" loading="lazy" width="100" height="100">
</picture>

Tối ưu hóa trang web cho thiết bị di động yêu cầu triển khai Responsive design. Đây là lý do tại sao hầu hết các nhà phát triển web hiện đang tự hỏi làm thế nào để làm cho các trang web responsive trong hầu hết các dự án mà họ xử lý.

Đặt chiều rộng tối đa cho phép hình ảnh điều chỉnh kích thước dựa trên chiều rộng vùng chứa.

Các thẻ hình ảnh, nguồn và thẻ img được kết hợp để chỉ một hình ảnh được hiển thị và hình ảnh đó phù hợp nhất trên thiết bị của người dùng.

source được sử dụng để tham chiếu hình ảnh WebP có thể được sử dụng bởi các trình duyệt hỗ trợ nó. Thẻ nguồn thứ hai tham chiếu tệp PNG của cùng một hình ảnh cho các trình duyệt không hỗ trợ WebP .WebP là một định dạng hình ảnh có tính năng nén nâng cao cho hình ảnh dựa trên web.

srcset thông báo cho trình duyệt về hình ảnh nào sẽ được hiển thị, tùy thuộc vào độ phân giải màn hình của thiết bị cụ thể.

loading = ”lazy” thuộc tính / cặp giá trị: Triển khai tải từng phiên bản gốc.

  1. Video responsive

Một cách hiệu quả để tạo độ phản hồi trong video là sử dụng tỷ lệ khung hình. Đoạn mã dưới đây giải thích điều này:

<style>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}

.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="https://www.youtube.com/video" frameborder="0" allowfullscreen></iframe>
</div>

Đoạn mã trên nhúng video YouTube dưới dạng iframe và vùng chứa div với lớp videoWrapper.

position: relative được đặt trên phần tử vùng chứa để các phần tử con sử dụng định vị absolution so với nó.

height: 0 được kết hợp với padding-bottom: 56,25% thực hiện hành vi động với tỷ lệ khung hình 16: 9.

position: absolute, trên cùng: 0 và trái: 0 được đặt trên iframe để làm cho các phần tử web tự đặt nó so với phần tử gốc của chúng.

width và height là 100% làm cho phần tử con, iframe là 100% phần tử mẹ của nó, videoWrapper thiết lập bố cục tỷ lệ khung hình.

Kiểu chữ

Nói chung, các nhà phát triển web xác định kích thước phông chữ bằng pixel. Chúng hoạt động trên các trang web tĩnh, nhưng các trang web responsive cần có phông chữ responsive. Kích thước phông chữ phải thay đổi theo chiều rộng vùng chứa mẹ. Điều này là cần thiết để làm cho kiểu chữ điều chỉnh theo kích thước màn hình và có thể dễ dàng đọc được trên nhiều thiết bị.

html { font-size:100%; }

Trong đặc tả CSS3, hãy tìm đơn vị có tên là rems. Nó tương tự như đơn vị em, nhưng hoạt động liên quan đến phần tử HTML. Do đó, mã phải đặt lại kích thước phông chữ HTML:

@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width:1100px) { body {font-size:1.5rem;} }

Sử dụng theme hoặc layout được thiết kế trước để tiết kiệm thời gian

Nếu các nhà phát triển và nhà thiết kế đang tự hỏi làm thế nào để xây dựng một trang web responsive với thời hạn đặc biệt chặt chẽ, họ có thể chọn sử dụng theme hoặc layout được thiết kế trước với các thuộc tính responsive được tích hợp sẵn. WordPress cung cấp nhiều tùy chọn về vấn đề này (cả miễn phí và trả phí). Tất cả những gì các nhà thiết kế phải làm, sau khi chọn một chủ đề, là quyết định về màu sắc, thương hiệu và văn bản.

Kiểm tra khả năng responsive trên các thiết bị thực

Khi nghiên cứu cách làm cho một trang web responsive trên thiết bị di động, một điều thường bị bỏ qua là sự cần thiết của việc thử nghiệm trên các thiết bị thực. Các nhà phát triển có thể chỉnh sửa mã tất cả những gì họ muốn, nhưng chức năng của nó phải được xác minh trong điều kiện người dùng thực.

Khi xác định và triển khai Responsive design, điều quan trọng là phải kiểm tra cách trang web xuất hiện trên nhiều loại thiết bị. Trong chừng mực có thể, hãy thử nghiệm Responsive design trên các thiết bị thực để xác minh thiết kế sẽ trông như thế nào chính xác đối với người dùng cuối.

Sau khi được xem code html, hãy đưa trang web qua trình kiểm tra Responsive design. BrowserStack cung cấp một số thiết bị thực mới nhất để kiểm tra trang web trông như thế nào và nó có đủ phản hồi hay không.

CSS reponsive cách thiết kế responsive

Chỉ cần nhập URL của trang web và công cụ sẽ hiển thị giao diện của trang web trên nhiều thiết bị (iPhone 11, iPhone 8 Plus, Galaxy Note 20, Galaxy S9 Plus, v.v.).

Ngoài ra, BrowserStack cũng cung cấp một đám mây thiết bị thực với hơn 2000 trình duyệt và thiết bị thực. Chỉ cần đăng ký miễn phí, chọn kết hợp thiết bị-trình duyệt-hệ điều hành, điều hướng đến trang web và kiểm tra xem nó hiển thị như thế nào trên độ phân giải thiết bị đó.

Để kết luận

Làm theo các bước chi tiết ở trên sẽ trả lời các câu hỏi về cách làm cho trang web của bạn responsive. Số lượng nỗ lực dành cho việc thiết lập khả năng responsive tỷ lệ thuận với trải nghiệm của người dùng cuối. Hãy nhớ rằng người dùng mong đợi bất kỳ trang web nào cũng bổ sung hoàn hảo cho mọi thiết bị mà họ sở hữu – máy tính để bàn, máy tính bảng hoặc thiết bị di động. Nếu Responsive design của trang web không phù hợp với độ phân giải thiết bị nhất định (đặc biệt là thiết bị thường được sử dụng), trang web có nguy cơ bỏ lỡ một phân khúc đối tượng mục tiêu của nó. Tránh điều này bằng cách trong

dành thời gian và nghiên cứu cách làm cho một trang web responsive khi bắt đầu một dự án.

Leave a Reply