152 bình luận
Chia sẻ
Bài nổi bật
Không biết anh em ở đây thế nào, mình dùng chuyên ASP có sẵn hàm kiểm tra browser user, nếu là mobile thì mình redirect qua một hệ trang khác viết riêng cho nó, những trang này cũng viết bằng HTML, CSS, JavaScript và cũng xử lý server ASP như bình thường, nhưng được viết sao cho mã ít dư thừa, gọn, không dùng flash (và các dạng đa phương tiện tương tự), hình ảnh nhỏ, kích thước nhỏ hơn, hạn chế xử lý JavaScript quá phức tạp, tránh cẩu thả trong việc dùng HTML và CSS,... Còn lại không khác biệt gì giữa trang cho mobi và cho PC hay Mac.
Có bạn nào nói về WAP, trước đây (và bây giờ cũng vậy) với hầu hết các điện thoại thường trước 3G, thiết bị không xử lý nổi HTML, JavaScript nên phải viết bằng một ngôn ngữ định dạng khác gọi là WML và ngôn ngữ kịch bản WML Script trên nền giao thức WAP. Hiện tại 2 loại này đã lỗi thời vì hầu hết các điện thoại ngày nay xử lý HTML tốt.
Mọi thẻ HTML đều có thể được dùng và CSS có thể ghi đè định dạng mặc định của thẻ, dĩ nhiên qua quá trình sử dụng người ta có đưa ra quy ước sử dụng thẻ thì nên tuân theo (ví dụ XHTML bỏ i, u, b, hay div bao span nhưng ngược lại thì không,...)
HTML là ngôn ngữ đánh dấu, định dạng
CSS là ngôn ngữ định kiểu
JavaScript là ngôn ngữ lập trình kịch bản, PHP cũng thuộc loại này
Java, C, C++, C#,... là ngôn ngữ lập trình thông thường
Có bạn nào nói về WAP, trước đây (và bây giờ cũng vậy) với hầu hết các điện thoại thường trước 3G, thiết bị không xử lý nổi HTML, JavaScript nên phải viết bằng một ngôn ngữ định dạng khác gọi là WML và ngôn ngữ kịch bản WML Script trên nền giao thức WAP. Hiện tại 2 loại này đã lỗi thời vì hầu hết các điện thoại ngày nay xử lý HTML tốt.
Mọi thẻ HTML đều có thể được dùng và CSS có thể ghi đè định dạng mặc định của thẻ, dĩ nhiên qua quá trình sử dụng người ta có đưa ra quy ước sử dụng thẻ thì nên tuân theo (ví dụ XHTML bỏ i, u, b, hay div bao span nhưng ngược lại thì không,...)
HTML là ngôn ngữ đánh dấu, định dạng
CSS là ngôn ngữ định kiểu
JavaScript là ngôn ngữ lập trình kịch bản, PHP cũng thuộc loại này
Java, C, C++, C#,... là ngôn ngữ lập trình thông thường
Với lại chiều ngang trang di động đừng đặt cố định mà theo phần trăm, và để tự bung theo chiều ngang trình duyệt, sử dụng chung cho mọi thiết bị di động, không cần phải quan tâm máy khánh là iPhone, iPad hay Galaxy gì cả.
Em ví dụ bác làm 1 cái shop, phần list sp có 4 cột, mỗi cột bác để {width:25%} nhé. Trong mỗi ô thuộc mỗi cột bác sẽ có những cái cơ bản sau:
- Tên: MacBook Pro Rentina 15"
- Giá: $2199
- Ảnh: 468 x 640 (lấy làm ví dụ thôi)
Trên desktop (1920 x 1280) thì mỗi ô đó sẽ rộng 480px, coi như ok!
Bây giờ xem trên mobile (320x480) thì mỗi ô sẽ rộng 80px, bác có thể hình dung cái trang web lúc đó trông buồn cười thế nào chứ?
Giải pháp cho vấn đề này là gi?
RWD chính là câu trả lời! ;)
Vậy là các ô sẽ theo chiều dọc. Thử với cái trang của mình nhé: http://tiepbuoc.net
=> Màn hình dưới 800px các ô sẽ tự động co dãn theo % với max-width: 95%;
RWD khong lien quan den viec dung % hay px 😃
Với lại chiều ngang trang di động đừng đặt cố định mà theo phần trăm, và để tự bung theo chiều ngang trình duyệt, sử dụng chung cho mọi thiết bị di động, không cần phải quan tâm máy khánh là iPhone, iPad hay Galaxy gì cả.
Em ví dụ bác làm 1 cái shop, phần list sp có 4 cột, mỗi cột bác để {width:25%} nhé. Trong mỗi ô thuộc mỗi cột bác sẽ có những cái cơ bản sau:
- Tên: MacBook Pro Rentina 15"
- Giá: $2199
- Ảnh: 468 x 640 (lấy làm ví dụ thôi)
Trên desktop (1920 x 1280) thì mỗi ô đó sẽ rộng 480px, coi như ok!
Bây giờ xem trên mobile (320x480) thì mỗi ô sẽ rộng 80px, bác có thể hình dung cái trang web lúc đó trông buồn cười thế nào chứ?
Giải pháp cho vấn đề này là gi?
RWD chính là câu trả lời! ;)
cái này khó là nên thay đổi trang như thế nào khi chuyển từ màn hình rộng sang các loại màn hình có độ phân giải nhỏ hơn thôi.Nên bỏ cái gì,nên rút gọn cái gì hay hình ảnh như thế nào
bạn có thể tham khảo thêm về thiết kế website sử dụng responsive
bạn có thể tham khảo thêm về thiết kế website sử dụng responsive
www.huho.vn thấy trang này cũng đã áp dụng thiết kế web kiểu này, thấy cũng hay, thay vì phải làm 2 - 3 phiên bản cho PC, Tablet & Smartphone.
Mấy anh chị có thể viết những cái tutorial dễ hiểu để làm cái này ko ạ? Ở đây mình đã có trang web đã được layout sẵn rồi, làm sao để được RWD tốt nhất mà không phải phá vỡ CSS cũ chứ không phải download template về rồi mới nhét nội dung trang web vào.
Cảm ơn tất cả các anh chị nhiều!!
Cảm ơn tất cả các anh chị nhiều!!
Theo mình thấy nếu bạn này muốn viết 1 bài Overview về Responsive web design (RWD) cũng không cần viết "tỉ mĩ" quá như vậy đâu.
RWD là 1 xu hướng thiết kế web mới dẫn đầu trong năm 2013, mặc định người muốn tìm hiểu về xu hướng này đã biết về thiết kế web rồi nên bạn viết cũng không cần nói về div hay css hay html là gì đâu. Trong khi đó những cái đặc trưng phải biết để tạo ra 1 trang web responsive thì lại không thấy đề cặp tới...
Đọc 1 hồi vẫn không trả lời được cho cái Tiêu đề của bài viết.
Mình chỉ góp ý vậy thôi chứ không có ý chê bai hay ném đá gì người viết hết. Vì 1 mục tiêu cùng phát triển mà 😁
RWD là 1 xu hướng thiết kế web mới dẫn đầu trong năm 2013, mặc định người muốn tìm hiểu về xu hướng này đã biết về thiết kế web rồi nên bạn viết cũng không cần nói về div hay css hay html là gì đâu. Trong khi đó những cái đặc trưng phải biết để tạo ra 1 trang web responsive thì lại không thấy đề cặp tới...
Đọc 1 hồi vẫn không trả lời được cho cái Tiêu đề của bài viết.
Mình chỉ góp ý vậy thôi chứ không có ý chê bai hay ném đá gì người viết hết. Vì 1 mục tiêu cùng phát triển mà 😁
Khi thiết kế 1 website bạn sẽ phải thiết kế sao cho nó phù hợp không những với độ phân giải của màn hình mà còn , phải phù hợp với các thiết bị di động như iphone, ipad ..... làm thế nào để kiểm tra 1 website với hầu hết các thiết bị di động đó .
Rất đơn giản, để kiểm tra ta truy cập vào http://www.responsiveviewer.comvà gõ địa chỉ website vào là xong
Rất đơn giản, để kiểm tra ta truy cập vào http://www.responsiveviewer.comvà gõ địa chỉ website vào là xong
trang tư vấn tâm lý linh tâm này cũng réponsive này, giao diện khá đẹp
Bài mới
- Chịu trách nhiệm nội dung: Trần Mạnh Hiệp
- © 2024 Công ty Cổ phần MXH Tinh Tế
- Địa chỉ: Số 70 Bà Huyện Thanh Quan, P. Võ Thị Sáu, Quận 3, TPHCM
- Số điện thoại: 02822460095
- MST: 0313255119
- Giấy phép thiết lập MXH số 11/GP-BTTTT, Ký ngày: 08/01/2019