Không quá phức tạp để tạo ra một giao diện Responsive design mobile. Bài viết sau đây mình sẽ hướng dẫn bạn cụ thể 3 bước sở hữu một giao diện trên mobile một cách dễ dàng. Hãy cùng theo dõi nhé!
Có thể kể đến 3 kĩ thuật phổ biến sau đây:
– Dynamic serving: Đây là kỹ thuật hơi tốn công sức khi phải quy định sẵn cách hiển thị cho từng loại màn hình. Theo cách này, bạn cần tốn chút công sức để config riêng cho từng thiết bị như Ipad, Iphone….
– Parallel Mobile: Đây là hình thức đang phổ biến tại Việt Nam. Các website sẽ chạy 2 URL song song, một URL dành cho Mobile, một URL dành cho desktop, tuy nhiên cả hai sẽ có cùng một nội dung.
– Sử dụng responsive design mobile: Responsive Web là một bản web duy nhất có thể chạy được trên tất cả các thiết bị như PC, laptop, smartphone, hoặc tablet… Responsive Web có khả năng tự động thay đổi kích thước nội dung và hình ảnh cho nhiều loại kích thước màn hình khác nhau để chắc chắn rằng website đó được truy cập hiệu quả và dễ dàng trên bất kỳ thiết bị nào.
Một trang web có thể thân thiện với khả năng xem trên mọi thiết bị khác nhau sẽ là một điểm cộng to lớn cho doanh nghiệp của bạn. Điều này có lợi cho bạn trong việc dễ dàng tiếp cận khách hàng tiềm năng.
3 bước để tạo một giao diện Responsive design mobile
1. Tạo thẻ Meta tag
Viewport Meta Tag giúp thiết lập màn hình theo tỷ lệ 1×1. Điều này giúp loại bỏ những chức năng mặc định từ các trình duyệt smartphone hay iPad làm cho website chỉ hiển thị vừa màn hình của thiết bị và có thể phóng to bằng thao tác tay. Bạn có thể thêm vào Meta Tag của bạn một thẻ như sau:
Trình duyệt web IE8 trở xuống không hỗ trợ Media Query. Do đó, bạn có thể sử dụng media-queries.js hoặc respond.js để hỗ trợ.
2. Bố cục giao diện HTML của website
Trong ví dụ này, tôi có một bố cục trang cơ bản với một #header, #content nội dung, #sidebar, và #footer. Tiêu đề có height 180px cố định, nội dung #content width là 600px và #sidebar width là 300px.
Mã HTML:
3. CSS- Media Queries
Đầu tiên, định dạng CSS cho các div ở trên.
Sau đó, tôi sẽ sử dụng CSS3 media query, với viewport từ 980px trở xuống , màn hình sẽ hiển thị 2 cột với width của #content là 65% và #sidebar là 30%.
Và với viewport 700px trở xuống , ta set giá trị width của #content và #siderbar là auto , bỏ float đi để hiển thị 1 cột full width.
