Làm thế nào để Thực hiện một trang web di động đáp ứng trong AJAX cho HTML5 và CSS3 Lập trình

Các nhà phát triển web HTML5 và CSS3 có thể sử dụng AJAX để tạo một trang web di động đáp ứng. Một cách để làm cho trang web hoạt động tốt trên nhiều độ phân giải là cung cấp các quy tắc CSS khác nhau dựa trên loại phương tiện được phát hiện.

CSS3 có một tính năng tuyệt vời mới được gọi là truy vấn phương tiện truyền thông, cho phép bạn chỉ định loại phương tiện và xác định các tính năng khác nhau của màn hình. Bạn có thể sử dụng đặc tả này để xây dựng một tập con của CSS nên được sử dụng khi trình duyệt phát hiện một loại hoặc kích thước hiển thị nhất định.

Xác định loại phương tiện

Nguyên tắc @media cho phép bạn chỉ định loại kết quả đầu ra CSS bổ sung nên sửa đổi. Loại phương tiện phổ biến nhất là màn hình, in, nói, cầm tay, chiếu và TV. Có nhiều hơn, nhưng chỉ in và màn hình được phổ cập hỗ trợ.

Ví dụ: mã sau sẽ chỉ định kích thước phông chữ khi người dùng in tài liệu:

@media print {body {font-size: 10pt;}}

CSS này có thể được nhúng vào một CSS bình thường tài liệu, nhưng thường nên được đặt ở cuối tài liệu vì nó giữ các ngoại lệ đối với các quy tắc thông thường. Bạn có thể đặt mã CSS nhiều như bạn muốn trong phần tử @media, nhưng bạn chỉ nên đặt mã CSS phù hợp với tình hình cụ thể mà bạn quan tâm.

Làm thế nào để thêm một vòng loại

Ngoài việc chỉ định loại phương tiện truyền thông, @media quy tắc có một thủ thuật rất mạnh mẽ. Bạn có thể áp dụng điều kiện đủ điều kiện đặc biệt cho giới truyền thông.

Khi trình duyệt rộng hơn 500 pixel, bạn có thể thấy văn bản màu đen trên nền trắng. Nhưng làm cho màn hình hẹp hơn, và bạn thấy cái gì đó thú vị.

Thông thường, bạn sẽ sử dụng thủ thuật này để thay đổi cách bố trí, nhưng bắt đầu với ví dụ thay đổi màu đơn giản này. Dưới đây là đoạn code cho ví dụ đơn giản này:

narrowBlack. html cơ thể (màu: đen; background-color: white;} @media (tối đa-chiều rộng: 500px) {body {màu sắc: trắng; background-color: black;}}

Qualifier Demo
Hãy thử thay đổi kích thước trang này. Khi trang rộng hơn 500 pixel, nó hiển thị văn bản màu đen trên nền trắng.
Khi trang hẹp hơn 500 pixel, các màu sẽ đảo ngược, tạo ra văn bản trắng trên nền đen.

Đây là cách tạo một trang thích hợp với chiều rộng màn hình:

1. Tạo trang web của bạn như thường lệ.

   Đây là một nơi mà toàn bộ "nội dung riêng biệt từ bố cục" điều thực sự trả tiền. Cùng một HTML sẽ có hai kiểu khác nhau.

2. Áp dụng một phong cách CSS theo cách thông thường.

   Xây dựng phong cách chuẩn của bạn theo cách thông thường - bây giờ, nhúng phong cách trong trang với thẻ.Phong cách chính của bạn nên xử lý trường hợp thông thường nhất. (Thông thường, máy tính để bàn có kích thước đầy đủ.)

3. Xây dựng một quy tắc @media.

   Quy tắc @media CSS nên đi ở cuối CSS thông thường.

4. Đặt độ phân giải tối đa là 500px.

   Vòng loại này cho biết các quy tắc bên trong đoạn này sẽ chỉ được sử dụng nếu độ rộng của màn hình nhỏ hơn 500 pixel.

5. Đặt các quy tắc trường hợp đặc biệt bên trong bộ kiểu mới.

   Bất kỳ quy tắc CSS nào bạn xác định bên trong quy tắc @media sẽ được kích hoạt nếu vòng loại là đúng. Sử dụng các quy tắc này để ghi đè CSS hiện tại. Lưu ý rằng bạn không cần phải xác định lại tất cả mọi thứ. Chỉ cần cung cấp các quy tắc có ý nghĩa trong bối cảnh cụ thể của bạn.

6. Thêm khung nhìn.

   Các trình duyệt dành cho thiết bị di động đôi khi sẽ cố gắng sửa lại trang để tất cả có thể được nhìn thấy cùng một lúc. Điều này đánh bại mục đích của một phong cách đặc biệt, vì vậy hãy sử dụng metatag khung nhìn để cho biết trình duyệt nên báo cáo chiều rộng đúng của nó. Việc tắt quy mô trang cũng rất hữu ích vì không cần thiết nữa.

Trong ví dụ này, trình duyệt luôn áp dụng kiểu chữ chính (văn bản đen trên nền trắng). Sau đó, nó nhìn vào các @media quy tắc để xem nếu vòng loại là đúng sự thật.

Nếu chiều rộng dưới 500 pixel, chiều rộng tối đa: 500px được đánh giá là đúng, và tất cả mã CSS bên trong phân khúc @media được bật. Trình duyệt sẽ lưu trữ cả hai bộ CSS và áp dụng đúng CSS dựa trên trạng thái của quy tắc.