Cú pháp cho cả truy vấn phương tiện rộng và chiều rộng tối đa
Thiết kế web đáp ứng là một cách tiếp cận để xây dựng các trang web nơi các trang đó có thể tự động thay đổi bố cục và giao diện của chúng dựa trên kích thước màn hình của khách truy cập . Màn hình lớn có thể nhận được bố cục phù hợp với những màn hình lớn hơn trong khi các thiết bị nhỏ hơn, như điện thoại di động, có thể nhận được cùng một trang web được định dạng theo cách phù hợp với màn hình nhỏ hơn đó. Cách tiếp cận này cung cấp trải nghiệm người dùng tốt hơn cho tất cả người dùng và thậm chí có thể giúp cải thiện thứ hạng công cụ tìm kiếm . Một phần quan trọng của thiết kế web đáp ứng là Truy vấn phương tiện CSS.
Truy vấn phương tiện giống như các câu lệnh có điều kiện bên trong tệp CSS của trang web, cho phép bạn đặt một số quy tắc CSS nhất định sẽ chỉ ảnh hưởng khi đáp ứng một điều kiện nhất định - như khi kích thước màn hình ở trên hoặc dưới ngưỡng nhất định.
Truy vấn phương tiện trong hành động
Vậy làm cách nào để bạn sử dụng Truy vấn phương tiện trên trang web? Đây là một ví dụ rất đơn giản:
- Bạn sẽ bắt đầu với một tài liệu HTML có cấu trúc tốt miễn phí của bất kỳ kiểu trực quan nào (đó là CSS là gì)
- Trong tệp CSS của bạn, bạn sẽ bắt đầu như bạn thường làm bằng cách tạo kiểu trang và thiết lập đường cơ sở cho trang web sẽ trông như thế nào. Giả sử bạn muốn kích thước phông chữ của trang là 16 pixel, bạn có thể viết CSS này: body {font-size: 16px; }
- Bây giờ, bạn có thể muốn tăng kích thước phông chữ cho màn hình lớn hơn có nhiều bất động sản để làm như vậy. Đây là nơi Media Queries khởi động. Bạn sẽ bắt đầu một Media Query như thế này: @media screen và (min-width: 1000px) {}
- Đây là cú pháp của Truy vấn phương tiện. Nó bắt đầu bằng @media để thiết lập Media Query. Tiếp theo bạn đặt "loại phương tiện", trong trường hợp này là "màn hình". Điều này áp dụng cho màn hình máy tính để bàn, máy tính bảng, điện thoại, v.v. Cuối cùng, bạn kết thúc Truy vấn phương tiện với "tính năng đa phương tiện". Trong ví dụ trên của chúng tôi, đó là "giữa chiều rộng: 1000px". Điều này có nghĩa là Truy vấn phương tiện sẽ bắt đầu hiển thị với chiều rộng tối thiểu là 1000 pixel.
- Sau các phần tử này của Media Query, bạn thêm một dấu ngoặc nhọn mở và đóng tương tự như những gì bạn sẽ làm trong bất kỳ quy tắc CSS thông thường nào.
- Bước cuối cùng để truy vấn Media là thêm các quy tắc CSS mà bạn muốn áp dụng khi điều kiện này được đáp ứng. Bạn thêm các quy tắc CSS này giữa các dấu ngoặc nhọn tạo nên Media Query, như sau: @media screen và (min-width: 1000px) {body {font-size: 20px; }
- Khi các điều kiện của Media Query được đáp ứng (cửa sổ trình duyệt có chiều rộng tối thiểu 1000 pixel), kiểu CSS này sẽ có hiệu lực, thay đổi kích thước phông chữ của trang web từ 16 pixel chúng tôi đã thiết lập ban đầu thành giá trị mới 20 pixel.
Thêm phong cách khác
Bạn có thể đặt nhiều quy tắc CSS trong Truy vấn phương tiện này khi cần để điều chỉnh giao diện trực quan của trang web của bạn. Ví dụ: nếu bạn muốn không chỉ tăng kích thước phông chữ lên 20 pixel, mà còn thay đổi màu của tất cả các đoạn thành màu đen (# 000000), bạn có thể thêm điều này:
@media screen và (chiều rộng tối thiểu: 1000px) {body {font-size: 20px; } p {color: # 000000; }}Thêm truy vấn phương tiện khác
Ngoài ra, bạn có thể thêm nhiều Truy vấn phương tiện khác cho mọi kích thước lớn hơn, thêm chúng vào biểu định kiểu của bạn như sau:
@media screen và (chiều rộng tối thiểu: 1000px) {body {font-size: 20px; } p {color: # 000000; {} màn hình @media và (chiều rộng tối thiểu: 1400px) {body {font-size: 24px; }}Truy vấn phương tiện đầu tiên sẽ khởi động ở độ rộng 1000 pixel, thay đổi kích thước phông chữ thành 20 pixel. Sau đó, khi trình duyệt ở trên 1400 pixel, kích thước phông chữ sẽ thay đổi lại thành 24 pixel. Bạn có thể thêm bao nhiêu Truy vấn phương tiện khi cần cho trang web cụ thể của mình.
Chiều rộng tối thiểu và chiều rộng tối đa
Nói chung, có hai cách để viết Truy vấn phương tiện - bằng cách sử dụng "chiều rộng tối thiểu" hoặc với "chiều rộng tối đa". Cho đến nay, chúng ta đã thấy "chiều rộng tối thiểu" đang hoạt động. Điều này làm cho Truy vấn phương tiện có hiệu lực khi trình duyệt đã đạt đến ít nhất chiều rộng tối thiểu đó. Do đó, truy vấn sử dụng "chiều rộng tối thiểu: 1000px" sẽ áp dụng khi trình duyệt có chiều rộng tối thiểu 1000 pixel. Kiểu Truy vấn phương tiện này được sử dụng khi bạn đang xây dựng một trang web theo cách "đầu tiên trên thiết bị di động".
Nếu bạn sử dụng "chiều rộng tối đa", nó hoạt động theo cách ngược lại. Truy vấn phương tiện của "chiều rộng tối đa: 1000px" sẽ áp dụng khi trình duyệt đã giảm xuống dưới kích thước này.
Về các trình duyệt cũ hơn
Một thách thức với Media Queries là sự thiếu hỗ trợ của họ trong các phiên bản cũ hơn trên Internet Explorer. Rất may, có sẵn các polyfills có thể vá hỗ trợ cho Truy vấn phương tiện trong các trình duyệt cũ hơn, cho phép bạn sử dụng chúng trên các trang web ngày nay trong khi vẫn đảm bảo rằng trang web đó không bị hỏng trong phần mềm trình duyệt cũ hơn.
Biên tập bởi Jeremy Girard vào ngày 1/2/4/17