logo
Hỗ trợ: 24/7
Điện thoại: 098 984 8886
Email: info@thuonghieuweb.com

Thiết kế web tùy biến cho di động

updated on 2023-05-29

Một trong những kỹ thuật phức tạp nhất khi thiết kế web là có thể tùy biến giao diện theo các kích thước màn hình khác nhau, nhất là các thiết bị di động. Bài viết này giới thiệu một số thủ thuật thiết kế website dành cho di động.

Đặt vấn đề


Khi thiết kế một layout website theo chuẩn responsive, chúng ta phải xử lý hai vấn đề. Một là, chuyển đổi từ bố cục (layout) nhiều cột của website trên PC thông thường sang dạng bố cục dạng 1 hoặc tối đa là 2 cột để phù hợp với màn hình nhỏ của thiết bị di động. Hai là, thay đổi kích thước chiều ngang của các content có chiều ngang cố định, chẳng hạn như image sao cho đúng bằng kích thước của màn hình thiết bị di động và thay đổi kích thước chiều cao với một tỉ lệ tương ứng để đảm bảo hình ảnh hiển thị không bị méo.

Dưới đây tôi sẽ trình bày một số phương pháp để xử lý 2 vấn đề nêu trên.

Chuyển đổi layout từ nhiều cột sang một cột  


Có 2 cách để chuyển đổi layout từ dạng nhiều cột sang một cột. Cách thứ nhất là dùng CSS3 với khả năng thay đổi theo điều kiện, gần giống như câu lệnh "if" trong các ngôn ngữ lập trình có cấu trúc khác. Còn cách thứ hai là dùng code nhận diện thiết bị rồi load lên một layout rành riêng cho thiết bị di động như tôi đã trình bày trong bài "Nâng cấp website tương thích với thiết bị di động"

Cách thứ nhất thường được dùng khi thiết kế một webisite có tính responsive ngay từ ban đầu, khi đó chúng ta có thể điều chỉnh layout cho cả trang chủ, và các trang con trên PC cũng như trên thiết bị di động đồng thời. Còn đối với website đang chạy với PC thì khi nâng cấp tốt nhất nên dùng cách thứ 2 vì khi đó mà sửa CSS sẽ rất mất thời gian. Dưới đây tôi trình bày kỹ thuật thiết kế responsive dựa vào CSS thuần. 

Giả sử chúng ta muốn thiết kế một website có 3 cột đối với PC, và 1 cột đối với thiết bị di động chúng ta sẽ dùng câu lệnh @media kiểm tra điều kiện kích thước chiều ngang của màn hình thiết bị, nếu như nhỏ hơn một giá trị max-width cho trước thì sẽ đặt kích thước của cột bằng 100%. Khi đó 3 cột sẽ được đẩy xuống chứ không nằm theo hàng ngang nữa.

Các bạn có thể xem demo tại đây, khi xem demo các bạn thu nhỏ cửa sổ browser về tương đương kích thước màn hình di động 480px chiều ngang để xem hiệu ứng hoặc có thể copy link và truy cập vào từ một smartphone bất kỳ để xem thiết kế dạng ba cột được chuyển thành một cột như thế nào. Các bạn có thể download code đầy đủ tại đây

Điều chỉnh kích thước của các content có chiều ngang cố định

Chúng ta biết rằng thẻ img nếu không khai báo width và heigh thì nó sẽ lấy kích thước thực của ảnh. Khi thiết kế web cho di động, chúng ta sẽ muốn các hình ảnh hiện trong một cột và có kích thước chiều ngang bằng kích thước màn hình của thiết bị di động còn kích thước chiều cao thì co giãn theo đúng tỉ lệ thực của ảnh. Có một số cách để thực hiện yêu cầu này đó là dùng CSS hoặc dùng javascript. Nhưng trước hết các bạn cần nhớ một số khái niệm cơ bản sau:

Kích thước màn hình di động và máy tính bảng: (chiều ngang * chiều cao)
240 * 320
240 * 400
240 * 432
320 * 480
480 * 640
480 * 800
480 * 854
600 * 1024
640 * 960
768 * 1024
768 * 1280
800 * 1280

Khi thiết kế layout, chúng ta hoặc là dùng div hoặc là dùng table. Div thì có thể thay đổi kích thước theo đối tượng chứa nó bằng cách đặt kích thước theo tỉ lệ %, còn table thì có thể có giãn kích thước theo nội dung bên trong. Hãy xem 3 ví dụ cụ thể dưới đây để hình dung về các kỹ thuật này.

Example 1: Dùng CSS để tạo ra một thẻ div có chứa một ảnh có thể co giãn bất kỳ theo kích thước màn hình. Thủ thuật ở đây rất đơn giản đó là chúng ta gán thuộc tính display:table cho thẻ div, khi đó thẻ dive sẽ mang thuộc tính giống table, đó là có thể co giãn chiều cao theo các đối tượng chưa bên trong. 

Các bạn chạy bản demo ở  đây và dùng chuột thu nhỏ, phóng to kích thước cửa sổ browser để xem hiệu ứng. Các bạn có thể download code đầy đủ ở đây

Example 2: Dùng CSS để kiểm tra kích thước màn hình và thay đổi thẻ div cũng như đối tượng ảnh bên trong nó tùy biến theo màn hình. Trong bản demo example1 có một hạn chế đó là khi có nhiều div lồng nhau hoặc khi thẻ img nằm trong một số thẻ  khác như li, ul... thì kích thước của div sẽ khó kiểm soát được.  Để chắc chắn hiệu quả, chúng ta sẽ dùng điều kiện @media để nhận diện từng loại màn hình và điều chỉnh div theo kích thước này. Tuy nhiên chúng ta phải biết rõ tỉ lệ ảnh để điều chỉnh cho phù hợp. Ví dụ chúng ta có một ảnh kích thước 731*303, vậy thì với màn hình có chiều ngang 480 chúng ta sẽ làm thế nào? 

Khi nhận diện được màn hình chúng ta sẽ để width của div = 100% tức là bằng 480, còn tính toán lại chiều cao của div theo tỷ lệ như sau height= 303*480/731 ~ 199.  Tương tự chúng ta tính toán với các màn hình có chiều ngang 320,600,640,768,800... rồi đưa tất cả các kích thước tính toán được vào file css.

Các bạn xem demo ở đây và download code đầy đủ ở đây

Example 3: dùng javascript để thay đổi kích thước ảnh và thẻ div theo một tỷ lệ nhất định so với kích thước màn hình.

Đầu tiên chúng ta viết một hàm java để nó nhận diện kích thước của hình ảnh bên trong div và gán cho biến x. Cũng trong hàm này chúng ta thiết lập thuộc tính style.height của div theo giá trị của biến x này. Sau đó chúng ta bắt sự kiện onresize và onload trong thẻ body rồi thực thi hàm nói trên khi các sự kiện này xảy ra.
Xem demo ở đây và download code đầy đủ ở đây.

Chúc các bạn thành công!


   
 
Có thể bạn muốn xem thêm....

Những điều cần biết khi xây dựng website

Xây dựng một website không đơn giản chỉ là một gian hàng hay một tờ rơi. Bạn cần phải làm mọi cách để website của mình hướng tới khách hàng, và quan trọng hơn cả, là làm sao để nội dung của bạn có sức lan tỏa nhanh chóng trong môi trường mạng từ đó lôi kéo khách hàng đến với website của bạn

Xem chi tiết

Những điều cần biết về dịch vụ email với tên miền riêng

Email tên miền riêng là email gắn với tên miền của doanh nghiệp kiểu như tennhanvien@tencongty.com. Email tên miền riêng sẽ tạo sự chuyên nghiệp và tin cậy khi giao dịch, đồng thời có thể cấp phát cho nhân viên khi mới đi làm, thu hồi lại khi nhân viên đó thôi việc và lưu trữ được mọi giao dịch trên email mà không sợ nhân viên đổi mật khẩu, mang theo hòm thư khi rời công ty...

Xem chi tiết
Đội ngũ lập trình viên, kỹ thuật viên và seo-er của Thương Hiệu Web cam kết

Hỗ trợ 24/7

Hỗ trợ khách hàng 24 giờ 1 ngày, 7 ngày 1 tuần qua điện thoại, email và chat online

Hoàn tiền 100%

Trong thời gian 45 ngày sử dụng dịch vụ, nếu quý khách không hài lòng!

Cam kết uptime 99.99%

Nếu dịch vụ của quý khách bị gián đoạn, chúng tôi sẽ cộng thêm 1 tháng sử dụng

KHÁCH HÀNG NÓI VỀ CHÚNG TÔI

Một đơn vị xây dựng web tận tâm và chuyên nghiệp!

"Thương Hiệu Web là đơn vị thiết kế website có năng lực, tôn trọng và có trách nhiệm với khách hàng, đặt mình vào vị trí khách hàng để mang lại cho khách hàng nhiều giá trị từ chính dịch vụ của mình. Với tôi, Thương Hiệu Web là một lựa chọn hợp lý!" Chị Nguyễn Phượng, TP kinh doanh, Công Ty Cổ Phần Quản Lý Công Trình Đô Thị Hải Dương.

Xem bình luận trên FB

Website

Tên miền, hosting

Dịch vụ email

Hỗ trợ khách hàng

Sitemap Điều khoản sử dụng Chính sách riêng tư
Bản quyền thuộc về công ty cổ phần truyền thông số VDATA
Tầng 2, tòa nhà 71 Hoàng Cầu, Đống Đa, Hà Nội
Điện thoại: (04) 3990 9643 - Email: info@vdata.com.vn
Giấy chứng nhận ĐKKD số: 0102766780, do Sở KHĐT Tp Hà Nội cấp ngày 28/04/2009

Online