Hướng dẫn Responsive Web Design chuyên nghiệp (Giới thiệu)
Responsive Design
Hướng dẫn dành cho người mới bắt đầu để làm các trang web thân thiện với thiết bị di động
"Responsive design" đề cập đến ý tưởng rằng trang web của bạn nên hiển thị tốt bằng mọi thứ từ màn hình màn ảnh rộng tới điện thoại di động. Đó là một cách tiếp cận để thiết kế web và phát triển để loại bỏ sự khác biệt giữa phiên bản thân thiện với điện thoại di động của trang web và đối tác trên máy tính để bàn của bạn. Với responsive design, chúng cũng giống nhau.
Responsive design được thực hiện thông qua CSS "media queries". Nghĩ đến truy vấn phương tiện truyền thông như là một cách để áp dụng có điều kiện các quy tắc CSS. Họ nói với trình duyệt rằng họ nên bỏ qua hoặc áp dụng các quy tắc nhất định tùy thuộc vào thiết bị của người dùng.
Media queries cho phép tôi trình bày nội dung HTML giống như bố cục CSS riêng biệt. Vì vậy, thay vì duy trì một trang web cho điện thoại thông minh và một trang web hoàn toàn không liên quan đến máy tính xách tay / máy tính để bàn, tôi có thể sử dụng cùng một đánh giá HTML (và máy chủ web) cho cả hai. Điều này có nghĩa là bất cứ khi nào tôi thêm bài viết mới hoặc chỉnh sửa lỗi đánh máy trong HTML của tôi, những thay đổi đó sẽ được phản ánh tự động trong cả bố cục di động và màn ảnh rộng. Đây là lý do tại sao tôi tách nội dung ra khỏi bản trình bày .
Trong chương này, chúng ta sẽ học cách các truy vấn truyền thông thực sự chỉ là một bộ bao bọc mỏng xung quanh CSS cũ mà chúng ta đang làm việc với đến thời điểm này. Như chúng ta sẽ sớm khám phá, thật sự dễ dàng để triển khai bố cục phản hồi. ( Mặt khác, Responsive Images là một câu chuyện hoàn toàn khác).
----------------------------Thiết lập----------------------
Tạo một dự án mới gọi là thiết kế đáp ứng (responsive-design) và tạo một tệp mới tên là responsive.html. Đây là trang web trống nhất mà chúng ta đã thấy trong một thời gian, nhưng nó sẽ giúp tôi chứng minh điều gì đó rất quan trọng trong phần tiếp theo:
<html>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Responsive Design</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<!-- There's nothing here! -->
</body>
</html>
Bạn cũng sẽ cần phải tải xuống một số hình ảnh cho phần sau của chương. Giải nén tất cả mọi thứ vào cùng một thư mục với responsive.html, giữ thư mục hình ảnh gốc. Dự án của bạn nên giống như thế này trước khi chuyển sang:
Bài tiếp theo >>
Hướng dẫn Responsive Web Design chuyên nghiệp (css media queries)
Như vậy là xong các bạn có thấy đơn giản không nào? Nếu không làm được hãy để lại bình luận bên dưới để được hỗ trợ nhanh chóng..
Tác giả: Minh Trung
Tác giả: Minh Trung
