RESPONSIVE WEB DESIGN

Giới thiệu• RWD là thiết kế giao diện web thích ứng với các loại thiết bị hiện thị như: • Điện thoại di động - mobile... Giới thiệu • Ưu điểm RWD đạt được • Hiện thị nội dung dễ nhìn • D

RESPONSIVE WEB DESIGN

Sinh viên thực hiện:

Hoài Thu

Nội dung thuyết trình

1 Giới thiệu

Vì sao phải sự dụng RWD ?

- Nếu không dùng RWD điện thoại phải zoom

màn hình và chỉ xem được 1 phần nội dung

- Nếu dùng chỉ cần kéo xuống

1 Giới thiệu

• RWD là thiết kế giao diện web thích ứng với

các loại thiết bị hiện thị như:

• Điện thoại di động - mobile

1 Giới thiệu

• Ưu điểm RWD đạt được

• Hiện thị nội dung dễ nhìn

• Dễ sử dụng

• Thích ứng với các loại màn hình khác nhau

2 Phân loại

• Fluid grid: sử dụng % để điều chỉnh kích cỡ,

không sử pixel hoặc point

• Flexible image: sử dụng thẻ chứa để giới hạn hiện thị đối tượng

• Media queries: cho phép trang web hiện thị

theo định dạng css tương ứng với những thiết

bị đã định dạng săn

3 Thành phần chính

• Viewport

• Grid view

• Media queries

3 Thành phần chính

• Media queries: cho phép trang web hiện thi

theo định dạng css tương ứng với những thiết

bị đã được xây dựng sẵn

5 Các bước thực hiện

• Chọn loại RWD: media queries

• Thiết kế DOM

5 Các bước thực hiện

• CSS: định dạng CSS cho từng loại màn hình

@media screen and (min-width:1280px){ }

@media screen and (min-width:1024px){ }

@media screen and (max-device-width: 480px)

and (orientation:landscape){ }

@media screen and (max-device-width: 480px)

and (orientation:portrait) { }

5 Các bước thực hiện

• HTML

Thiết kế web theo sơ đồ phác thảo dựng sẵn.

• Kiểm tra và chỉnh sửa

• Thay đổi kích thước màn hình, sự dụng toggle

device mode trên trình duyệt để kiểm tra các đối tượng và menu.

• Adobe phonegap thiết kế giao diện web trên

thiết bị di động

6 Công cụ hỗ trợ

• Framework: nơi tập hợp các định nghĩa về

css cho phép thiết bị hiện thị responsive

 W3.css

 boostrap

7 demo

• Liên kết tới Demo của nhóm:

o File CSS đã được định dạng responsive

o File HTML

o File TXT

7 demo

• Kết quả khi chạy Demo như sau:

Trên desktop